为了达成不同账号(员工、总裁)登录系统后看到不同页面，执行不同功能，RBAC(Role-Based Access control)权限模型，就是根据角色的权限，分配可视页面。
三个关键点:
用户:使用系统的人
角色：使用系统的人是什么职位(员工、经理、总裁)
权限点：职位可以做的事情(左侧菜单栏中的功能模块——>增删改查)
测试流程：
①在员工管理页新增员工这是三要素中的用户
②为新增的员工分配角色
③在公司设置里为角色分配权限
💢系统中的权限不能随意添加，必须是以开发出来的权限（左侧菜单栏里可实现的页面）
💢用户和角色之间是一对多的关系，一个人身兼数职。
1.实现分配角色
点击分配角色、弹出框，框里含有已有角色列表，点击分配角色时将id传过去，根据id显示当前用户已有的角色。
分配角色父组件src/employees/employee.vue
分配角色的子组件：employees/assignRole.vue
💢《el-checkbox-group v-model=“rolesList”》中v-model绑定的值是数组表示可多选。
💢在模板中渲染数据时
{{ item.name }}
其中label决定当前选中的值，{{要展示的角色名称}}
父组件中(views/setings/setings.vue)：准备弹框 -> 注册事件 -> 提供数据方法
子组件中(settings/assignPermission.vue):
3.2 动态生成左侧菜单
新用户登录成功页面跳转、进入导航守卫
3.3 在router/index.js中的路由配置中删除动态路由的部分改为：routes: […constantRoutes]
3.4 在permission.js中引入动态路由，并使用addRoutes动态添加，此时左侧动态路由只剩下静态首页了，可在地址栏输入地址实现跳转(addRoutes的作用)
3.5 从actions中返回菜单项
3.6 在permission.js中获取action的返回值并过滤
💢如果想调用addRoutes方法之后，路由表数据立刻在左侧菜单栏中显示，那就将动态路由菜单保存在vuex中
3.7修复bug
3.7.1解决刷新出现的白屏(路由守卫中的 //3…)
3.7.2退出后，再次登陆，发现菜单异常 （控制台有输出说路由重复）
原因：路由设置是通过router.addRoutes(filterRoutes)来添加的，退出时，并没有清空，再次登陆，又加了一次，所以有重复。
需要将路由权限重置 (恢复默认) 将来登录后再次追加才可以，不然的话，就会重复添加
解决：
router/index.js文件，有一个重置路由方法
在登出的时候， 调用一下即可store/modules/user.js
4.1 自定义指令：自己定义的指令，因为本身指令不够用，所以我们需要自已去定义。
4.2 解决按钮级别的权限验证 ——在main.js中,定义全局指令
使用
※这里的：'import_employee’是从标识符来的
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/11987.html