手把手教你搞定權限管理，結合Vue實現菜單的動態權限控制！

SpringBoot實戰電商項目mall（30k+star）地址：github.com/macrozheng/…

摘要

權限管理在後端項目中主要體如今對接口訪問權限的控制，在前端項目中主要體如今對菜單訪問權限的控制。在《手把手教你搞定權限管理，結合Spring Security實現接口的動態權限控制！》中咱們實現了對後端接口的動態權限控制，今天咱們講下如何結合Vue來實現菜單的動態權限控制。

使用技術

mall-admin-web實現菜單的動態權限控制使用到了兩種技術，一種是Vue Router，另外一種是Vuex，咱們先來了解下這兩種技術。

Vue Router

Vue Router是Vue.js官方的路由管理器。路由就是一個路徑，當咱們訪問指定路徑時就會跳轉到指定頁面。 咱們項目的路由都是在src/router/index.js文件中定義的，舉個例子，好比咱們的商品列表頁面路由定義以下。

因此當咱們訪問http://localhost:8090/#/pms/product時就會跳轉到商品列表頁面。

咱們前端的左側菜單都是根據Vue Router中定義的路由表生成的，要實現動態菜單顯示，其實只要實現動態路由便可。

Vuex

Vuex是一個專爲Vue.js應用程序開發的狀態管理模式，它採用集中式存儲管理應用的全部組件的狀態。Vuex能夠簡單理解爲一個全局的狀態管理器，咱們能夠把一些全局的狀態存儲在裏面。當咱們在多個組件中顯示這些狀態時，只要在任意一個組件中改變這個狀態，基於Vue的響應式渲染，其他組件中的這個狀態均會改變。

Vuex中有幾個核心概念須要瞭解下：

• Store：至關於一個容器，它包含着應用中大部分的狀態；
• State：Store中存儲的狀態，因爲使用了單一狀態樹，即Vuex中存儲的狀態只存在一份，當這個狀態發生改變時，和它綁定的組件中的這個狀態均會發生改變；
• Getter：從State中派生出的一些狀態，能夠認爲是State的計算屬性；
• Mutation：狀態的變化，更改Vuex中的State的惟一方法是提交Mutation；
• Action：用於提交Mutation的動做，從而更改Vuex中的State；
• Module：Store中的模塊，因爲使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象。爲了解決以上問題，Vuex容許咱們將Store分割成模塊。

Vuex中的核心流程以下：

菜單的動態權限控制

接下來咱們來說下如何結合Vue Router和Vuex來實現菜單的動態權限控制。

首先咱們須要修改src/router/index.js中的路由表，將路由表進行拆分，拆分紅必需要顯示的靜態路由表和能夠動態顯示的動態路由表。

而後咱們須要添加src/store/modules/permission.js文件，在Vuex的Store中添加權限相關狀態，好比和左側菜單綁定的路由表。

這裏有個比較核心的GenerateRoutes方法，用於生成當前用戶能夠訪問的路由。咱們的data參數中包含了用戶能夠訪問的菜單信息。它的具體執行流程以下：從菜單信息中篩選出能夠訪問的動態路由，而後進行排序，最後提交狀態改變到Vuex中去改變routers這個狀態。

關於前端路由和後臺菜單的匹配，實際上是根據路由名稱和菜單的前端名稱來肯定的，好比商品列表中的路由名稱和ums_menu表中存儲的前端名稱以下。

接下來咱們須要修改src/store/index.js文件，在Vuex的Store中添加這個權限模塊的狀態。

再修改src/store/getters.js文件，給權限模塊中的兩個狀態取個別名方便訪問。

咱們還須要修改src/views/layout/components/Sidebar/index.vue文件，將左側菜單組件和Vuex中存儲的路由狀態進行綁定，這樣當咱們修改了Vuex中的狀態後，菜單就會改變了。mapGetters是個輔助函數，能夠將Store中的Getter屬性映射到局部計算屬性。

最後咱們須要在用戶登陸成功後，經過store.dispatch('GenerateRoutes', { menus,username })來修改Vuex中存儲的路由狀態並傳入用戶能夠訪問的菜單信息。

權限管理功能演示

具體參考：你們心心念唸的權限管理功能，此次安排上了！

項目源碼地址

github.com/macrozheng/…

公衆號

mall項目全套學習教程連載中，關注公衆號第一時間獲取。