<p>上一文章讲述了利用RBAC实现访问控制的思路（），本文主要详细讲解利用vuex实现RBAC权限控制。</p> 讯享网
从后台获取到权限对照表，如下：
1、添加/编辑楼宇 park:building:add_edit
2、楼宇管理 park:building:list
3、删除楼宇 park:building:remove
4、添加/编辑企业 park:enterprise:add_edit
5、企业管理 park:enterprise:list
6、查看企业详情 park:enterprise:query
7、删除企业 park:enterprise:remove
释义： “parking:rule:add_edit”--- parking是一级菜单，rule是二级子菜单，add_edit是页面上的添加或编辑按钮
注：管理员权限为：*:*:*
在判断是否登录成功的路由守卫页面中，调用获取权限的接口，将结果存到vuex中。
路由守卫内容如下：
讯享网
vuex中的内容如下：
接口返回数据如下：
在路由守卫中的方法获取到权限数据后，再通过过滤、去重等方法，得到一级路由标识和二级路由标识。具体方法如下：
讯享网
筛选后的一级路由标识和二级路由标识如下：
将路由分为静态路由数组和动态路由数组，静态路由数组是由无权限控制的页面，如/login、/404等静态页面组成，动态路由数组是由有权限控制的页面，如/park、/parking等页面组成。
router下的文件夹目录结构如下，index.js是静态路由数组，asyncRoutes.js是动态路由数组。
index.js的内容如下：
asyncRoutes.js的内容如下：
讯享网
根据第三步得到的一级路由标识和二级路由标识 ，对动态路由数组进行筛选，得到最终的动态路由表。
最终动态路由表如下：
将上一步得到的动态路由表添加至路由对象中，从而实现通过链接跳转；再将其存在vuex中，已达到页面左侧菜单的渲染。
讯享网
左侧菜单完整内容如下：
1、新建directive/index.js文件，创建全局指令，实现按钮的显示和隐藏，具体内容如下：
讯享网
2、在main.js中注册全局指令
3、在页面中使用全局指令
讯享网
在退出时，对数据进行清除，以防下次无权限用户登录时，自动跳转。
store的方法如下：
讯享网
router的方法如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/165049.html