權限管理主要展現在對菜單、操作、頁面等權限的控制，實作根據使用者權限來動态顯示不同的導航菜單、操作權限及頁面内容等功能。菜單的動态權限控制主要用到了Vue Router和Vuex這兩個技術，前端的導航菜單一般都是根據Vue Router中定義的路由表來生成的，要實作動态菜單顯示其實就是實作動态路由個過程。Vuex作為Vue中的狀态管理器可以用來存儲從Router中篩選出可通路的動态路由并改變Router的狀态。
路由表定義
通常情況下我們都是在src/router/index.js中來定義路由表的，路由通常分為兩種，一種是正常的路由(靜态路由表)，這部分路由所有使用者都可以通路，如登入、404錯誤、500伺服器異常等頁面。另一種是權限路由(動态路由表)，這部分路由需要使用者被授權才能通路，我們的動态路由也是根據這部分來做權限管理的。
擷取使用者權限
使用者權限通常都是在伺服器上存儲的，我們在隻有登入之後才能擷取到使用者的相關權限。資料的請求需要通過Token的認證，是以我們需要将Token存入Vuex和Cookie中讓使用者保持線上狀态。接着我們就可以通過Token來擷取使用者的相關權限，這裡不直接在登入的時候擷取授權菜單是為了防止重新整理路由，因為路由重新整理的時候Vuex中存儲的資料會丢失。
路由攔截篩選
既然是根據使用者權限來顯示菜單，那麼在通路路由之前我們就需要先擷取到使用者可以通路的路由資訊。既然不允許通路那麼自然就不應出現在導航菜單中了，是以在路由加載完成之前我們就需要對路由進行篩選。這個可以利用Vue Router的鈎子函數beforeEach來實作，在beforeEach通過Token擷取授權菜單資訊然後進行路由篩選。
await關鍵字
await是個關鍵字，即等待的意思。await隻能放到async函數裡面，async關鍵字定義的是一個異步函數。異步函數不會阻塞後面代碼的繼續執行，傳回的是一個promise 對象。如果要擷取到promise的傳回值用then擷取，await則是需要等異步函數執行完成并拿到promise resolve的值之後才會繼續執行的。
await is a reserved word錯誤解決
這裡在使用await的時候遇到一個錯誤：await is a reserved word，提示await是一個保留的關鍵詞。遇到這個錯誤的時候你就要看下你使用的await函數是否是一個async異步函數了，這裡是在beforeEach()參數中忘了加async關鍵字修飾了。
生成新路由
建立一個GenerateRoutes方法用來生成目前使用者可以通路的新路由表，先通過GetInfo從背景擷取到可以通路的權限清單，再通過filterAsyncRoutes去篩選出可以通路的動态路由，并将該路由存儲到Vuex去改變routes的狀态進而重新整理出動态的導航菜單。
導航菜單渲染
在元件中載入Vuex中的mapGetters輔助函數可以直接調用state狀态中的routes屬性，我們将菜單元件和Vuex中存儲的路由狀态進行綁定起來，當routes發生變化的時候菜單也就跟着變化了。
總結：
這裡有個問題需要注意那就是從使用者端擷取到的權限清單存儲在Vuex中時如果使用者重新整理路由就會丢失，是以我們在beforeEach中最好先判斷一下如果Vuex中的routes丢失我們就重新新請求一次背景重新擷取下權限清單。我這裡因為背景還沒寫對應的接口是以先在登入的時候将權限清單存儲在Vuex的同時存了一份在Session Storage中，state值預設從Session Storage中擷取(這種方式不安全，容易被使用者篡改權限，是以最好不用)。以上内容是小編給大家分享的【Vue實戰078：權限管理實作導航菜單動态加載】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。