![131f78daab62795e47cfac4e09488092.png](https://i-blog.csdnimg.cn/blog_migrate/cd6794e7cdcc479453d91f7764e932c3.jpeg)
权限管理在后端项目中主要体现在对接口访问权限的控制,在前端项目中主要体现在对菜单访问权限的控制。在《手把手教你搞定权限管理,结合Spring Security实现接口的动态权限控制!》中我们实现了对后端接口的动态权限控制,今天我们讲下如何结合Vue来实现菜单的动态权限控制。
SpringBoot实战电商项目mall(30k+star)地址:https://github.com/macrozheng/mall
使用技术
mall-admin-web
实现菜单的动态权限控制使用到了两种技术,一种是Vue Router,另一种是Vuex,我们先来了解下这两种技术。
Vue Router
Vue Router是Vue.js官方的路由管理器。路由就是一个路径,当我们访问指定路径时就会跳转到指定页面。 我们项目的路由都是在src/router/index.js
文件中定义的,举个例子,比如我们的商品列表页面路由定义如下。
![dd2765fc0bdbe6362e1296f4682f3f39.png](https://i-blog.csdnimg.cn/blog_migrate/cf7c0ed4c83085196b470e55c0d74502.jpeg)
所以当我们访问http://localhost:8090/#/pms/product时就会跳转到商品列表页面。
![a6a7bfd2d18dad93e84fd03040da8b75.png](https://i-blog.csdnimg.cn/blog_migrate/7ee670d64f4ef539e22877edf23a15ab.jpeg)
我们前端的左侧菜单都是根据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中的核心流程如下:
![d45fa03ae05b3229fe4ffed919c80faf.png](https://i-blog.csdnimg.cn/blog_migrate/0d6205df65154fd5839f3be6c955d8d1.png)
菜单的动态权限控制
接下来我们来讲下如何结合Vue Router和Vuex来实现菜单的动态权限控制。
首先我们需要修改src/router/index.js
中的路由表,将路由表进行拆分,拆分成必须要显示的静态路由表和可以动态显示的动态路由表。
![5249d1f2a2bd7d5f8995d3f6bab56888.png](https://i-blog.csdnimg.cn/blog_migrate/02f43e807097569a6476ba7e8e884a0d.png)
然后我们需要添加src/store/modules/permission.js
文件,在Vuex的Store中添加权限相关状态,比如和左侧菜单绑定的路由表。
![11f80800fdddb07320f17e4574c0638c.png](https://i-blog.csdnimg.cn/blog_migrate/140b476edb5ea544c54b0ac4e4a43df0.png)
这里有个比较核心的GenerateRoutes方法,用于生成当前用户可以访问的路由。我们的data参数中包含了用户可以访问的菜单信息。它的具体执行流程如下:从菜单信息中筛选出可以访问的动态路由,然后进行排序,最后提交状态改变到Vuex中去改变routers这个状态。
![2f675cd4f2dc49bf4d336b44dd89ba1d.png](https://i-blog.csdnimg.cn/blog_migrate/f9e44ab2aafce9e446dbc1a7894deb5a.jpeg)
关于前端路由和后台菜单的匹配,其实是根据路由名称和菜单的前端名称来确定的,比如商品列表中的路由名称和ums_menu
表中存储的前端名称如下。
![74f1093ae6b102a18a70e0db1df61ae4.png](https://i-blog.csdnimg.cn/blog_migrate/09437cf6e48668e3ce593961421833e4.png)
![433a075b714f01fd3d072a2d3018eafb.png](https://i-blog.csdnimg.cn/blog_migrate/c5cb2ec37764462991c3a9fdf9191e0c.jpeg)
接下来我们需要修改src/store/index.js
文件,在Vuex的Store中添加这个权限模块的状态。
![29c77b51f0d4436f55ea7a57884df3fb.png](https://i-blog.csdnimg.cn/blog_migrate/960c4aafd8d133f4f2863eef9527e0b3.png)
再修改src/store/getters.js
文件,给权限模块中的两个状态取个别名方便访问。
![b1dfbc4d23958124d35d458fbba93527.png](https://i-blog.csdnimg.cn/blog_migrate/c52cd41a6ba260e7d4509a18105c630e.png)
我们还需要修改src/views/layout/components/Sidebar/index.vue
文件,将左侧菜单组件和Vuex中存储的路由状态进行绑定,这样当我们修改了Vuex中的状态后,菜单就会改变了。mapGetters
是个辅助函数,可以将Store中的Getter属性映射到局部计算属性。
![30d15716764051993754c609e98800f9.png](https://i-blog.csdnimg.cn/blog_migrate/0ea702ef5f8e29d4b8ec716d7d977c04.jpeg)
最后我们需要在用户登录成功后,通过store.dispatch('GenerateRoutes', { menus,username })
来修改Vuex中存储的路由状态并传入用户可以访问的菜单信息。
![f95e67863c42f37cee909869cf8b18fd.png](https://i-blog.csdnimg.cn/blog_migrate/8634484eb27956a3401abaaaab18e14e.jpeg)
权限管理功能演示
具体参考:大家心心念念的权限管理功能,这次安排上了!
项目源码地址
https://github.com/macrozheng/mall-admin-web
本文 GitHub https:// github.com/macrozheng/m all-learning 已经收录,欢迎大家Star!