目录
一、RBAC(Role-Based Access control)
二、3个结构预备
（1）员工页：
（2）角色管理页：
（3）权限管理页：
三、实现RBAC权限设计模式
（1）给员工(用户)分配角色
（2）给角色(职位)分配权限
（3）实现动态生成左侧菜单栏(重点)
（4）实现页面中控制按钮权限(重点)
总结
BUG
（1）刷新页面时出现404
（2）对于addRoute添加的路由，在刷新时会白屏
（3）退出登录时重置路由
全部代码 gitee
RBAC中文意为基于角色的权限控制，是一个权限设计思想，也就是说根据不同的用户角色，有不同的权限控制，例如权限页面，权限功能。
使用场景：登录后每个用户看到的菜单界面是不同的，操作的功能也不一样，例如老板、财务和员工，老板的级别就高级一点了，所有的菜单栏都可以访问，而财务只能看见考勤和对应的工资，而员工只能看见自己的个人信息。
这时候就产生了三个关系，分为用户、角色、权限点
用户：每个账号的人
角色：在公司中什么位置映射这有什么权限
权限点：每个角色可以操作什么
例如：用户===》老板===》所有权限，给每个用户一个角色定然有不同的权限点 ，用户和角色是一对多的关系
（1）员工页：
功能：增、删、改、查、分页、分配角色 、导入表格、导出表格
点击分配角色 弹出 分配角色界面
（2）角色管理页：
功能：新增角色(职位)、分配权限、编辑、删除、分页
（3）权限管理页：
一级表格代表页面级，二级表格代表按钮级
功能：对页面进行增(一定是有路由的)删改查
添加权限弹框 权限标识作为唯一标识
下面两步基本的ajax步骤只是对操作进行概述，不放无用代码
（1）给员工(用户)分配角色
用户和角色是一对多的关系：一个用户可以拥有多个角色，这样他就会具体这多个角色的权限了。
（2）给角色(职位)分配权限
为什么要给角色设置职位？
1.从下图中可以看到，董事长所有的页面和所有的权限按钮都有权限，而员工只在薪资管理和考勤管理页面上有查看的权限，并没有其他的一些权限
2.给用户不同的身份，就代表这有什么权限
例如给员工角色设置权限，从下图来看只能访问员工管理、考勤、工资页，其他页面是不能看到的，包括按钮级别导出表格用户是可以使用的但是没有导入表格的权限功能，我们如何进行实现呢？
（3）实现动态生成左侧菜单栏(重点)
在我们之前左侧的菜单栏都是固定死的，这就导致了每个用户访问的都是看到一样的页面，接下来我们就要使用vue-router对象中的addRoutes，用它去添加动态路由
addRoutes基本使用
01、删掉动态路由
在之前我们都是静态和动态路由放在一起的，现在要删掉动态路由，保留静态路由
02、 在前置路由守卫中添加路由
引入需要的动态路由，并动态添加路由，添加路由后，现在路由是可以访问的，但是菜单栏是只有静态路由了
03、定义vuex 动态生成左侧菜单-改写菜单保存位置
在我们之前是通过this.$router.options.routes拿到路由数据并渲染菜单栏，这个数据是固定的，我们通过addRoutes添加的路由只存在内存中并不会改变this.$router.options.routes拿到的值，所以现在要动态路由放到vuex中，因为vuex是响应式的，只要调用vuex，每个用户登录时得到路由数据的时候，都会去调用一次vuex
补充模块。在menu.js
注册menu的vuex
04、在前置守卫中调用vuex
05、左侧菜单改写成 拿vuex中路由的数据
06、过滤左侧菜单
目前通过05已经拿到了路由 左侧菜单栏目前显示了所有的路由，接下来就要去过滤路由，在我们登录的时候vuex中的user模块会返回给我们权限的数据，我们可以通过得到的数据去和路由对比，如果登录时返回的数据有这个路由就进行显示否则不显示
返回actions中登录信息的menus数据
07、在路由前置中拿值并过滤
所有的路由去和登录时返回的数据进行过滤
08 测试
页面权限设置成功了，换个角色为员工的账号进行查看，发现已经成功了
回头看一下刚才的图 在用户登录时会返回给我们一个权限数 里包含着页面权限，按钮权限，我们可以通过数据进行是否要显示数据，
通过自定义指令去判断是否要显示这个按钮，获取vuex中的登录时返回的按钮级别权限信息得到要显示的按钮，如果有就不用管显示就好了，如果没有 移除自己
补充 自定义指令绑定的值v-allow="message" 可以在自定义指令中的binding.value 拿到message的值
在按钮上绑定自定义指令
RBAC(Role-Based Access control)一种基于角色的设计思想
- 给员工配置角色 （一个员工可以拥有多个角色）
- 给角色配置权限点 （一个角色可以有多个权限点）
员工只要有了角色之后，就自动拥有了角色绑定的所有权限点
根据权限设计思想对应业务模块
- 员工管理
- 角色管理
- 权限点管理（它是没有调整的余地的：它会严格与当前系统的功能对应！）
页面权限
菜单权限控制
登录 > 菜单权限数据 > 和本地的所有的动态路由数据做匹配出具 > 得到根据权限筛选之后的动态路由数据
按钮权限控制
登录 > 按钮权限数据 > 使用按钮单独的权限标识 去权限数据里面查找 ————通过自定义指令
（1）刷新页面时出现404
动态添加路由后 404的位置不是路由的末尾了 把404页面改到最末尾就好了
1. 从route/index.js中的静态路由中删除这一项
2.在路由守卫中最后添加到过滤的路由数组中
（2）对于addRoute添加的路由，在刷新时会白屏
（3）退出登录时重置路由
退出后，再次登陆，发现菜单异常 （控制台有输出说路由重复）
原因:
路由设置是通过来添加的，退出时，并没有清空，再次登陆，又加了一次，所以有重复。
需要将路由权限重置 (恢复默认) 将来登录后再次追加才可以，不然的话，就会重复添加
1.在router/index.js中定义一个方法 这个方法将路由重新实例化
2.退出的时候调用这个方法
路由守卫 permission.js
store/modules/user.js actions部分
store/modules/menu.js
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/3524.html