vue-router+vuex實作加載動态路由和菜單

動态路由加載和動态菜單渲染的應用在後端權限控制中十分常見，後端隻要加載權限路由進行渲染傳回到浏覽器就可以。在前後端分離中，權限控制動态路由和動态菜單也是一個非常常見的問題。其實我們最最理想的效果是什麼呢？

我們通路一個應用，在登入之前有哪些路由是一定要加載的呢？你看我總結如下，你看下是不是這些：

但是在vue中，一旦執行個體化，就必須初始化路由，但這個時候你還沒有登入，沒有擷取你的權限路由呀，如果加載全部路由，那麼在浏覽器上輸入路由你就可以通路（這個問題可以使用router.beforeEach鈎子進行權限鑒定解決），那麼在前後端分離的開發項目中，vue是如何實作動态路由加載實作權限控制的呢？這就是我們這篇文章要寫的内容。

我們寫過背景渲染都知道怎麼去實作，那麼放到vue中如何去實作呢？我們先羅列幾個問題進行思考，如下

我們先順着這兩個問題進行思考，并且順着這兩個問題，我們進行對應方案解決，這個過程中會會出現很多新的問題，我們也針對新問題出對應方案，并且進行優化。

路由初始化發生在什麼時候呢？我們可以看主入口檔案main.js，下面是我貼出的我的一個項目案例：

通過上面的主入口檔案，我們就知道，這個路由初始胡就發生在vue執行個體化時。這個也很好了解如果你沒有初始化路由，那麼你就預設隻能進入到主視窗，那麼接下來主視窗中你沒有路由你怎麼跳轉？程式也不知道你有哪些地方可以跳轉呀，路由都是需要先注冊到執行個體中，執行個體才能定位到相應的視圖。從中我們知道，路由初始化發生在vue執行個體化時。

那麼這個時候我們接着我們想要的權限控制目标走：程式一開始，隻注冊登入路由、系統資訊路由（歡迎頁面，404路由，error路由），我們稱這些為靜态路由，登入後我們通過接口擷取權限拿到了菜單，這個時候需要進行添加動态路由，把這些菜單資訊注冊為路由，我們稱這些為動态路由。那麼vue執行個體化時，vue-router就已經被初始化，那麼我們是不是能夠通過類似于往router執行個體裡面添加路由項的方式進行注冊路由呢？我們可以查閱文檔，也可以檢視vue-router源碼，有一個叫做addRoutes的方法進行動态注冊路由資訊，路由對象其實就是一個路由數組，我們通過addRoutes就可以進行動态注冊路由，這個跟那個數組中extend功能類似的。

是以說道這裡我們知道可以通過addRoutes進行動态路由注冊。好，那麼我們就順着這個思路走下去。

在登入子產品中，登入成功後，我們通過api擷取背景權限菜單，然後注冊路由。代碼如下：

總結一下：

登入成功以後（持久化token），調用擷取權限菜單（儲存在store裡面），這個時候就完成了登入後動态初始化權限菜單的功能。那麼這裡面所有的路由就是目前使用者可通路的菜單，就實作了我們的目标效果。但是呢，store存儲權限菜單會有個問題，一旦重新整理裡面的值就刷掉了，那麼這個時候就重新執行個體化的時候就會跳到404路由中，菜單資訊也沒有了，那如何解決這個重新整理時的問題呢？

我們先分析一下思路：

那麼上面的思路就是動态加載權限菜單路由資訊的簡述，整個的環路就通了，重新整理問題就解決了。

代碼如下：

備注：根據子產品獨立性，我把登入中擷取權限清單去掉，都放置在全局鈎子中，把上面的代碼直接引入到主入口檔案main.js中。

另外這裡采用vuex進行狀态管理，是以從新捋一下思路：

到這裡我們就已經完成了vue-router+vuex動态注冊路由控制權限的方式就說完了，這裡我留個思考題給大家：現在根據上面的方式我再引入一個産品實體，(使用者 - 産品 - 菜單 )， 使用者可以有多個産品權限，每個産品有公用的菜單，也有各産品定制化的菜單，那麼這個時候我在前端如果做好權限校驗呢？要求：目前使用者目前産品的權限菜單才可被通路。