rbac权限控制（rbac 权限）



上一文章讲述了利用RBAC实现访问控制的思路（），本文主要详细讲解利用vuex实现RBAC权限控制。

        从后台获取到权限对照表，如下：

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的方法如下：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/47432.html