认识RBAC
为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。
其权限模式如下:
权限模式
三个关键点：
用户：使用系统的人
权限点：这个系统有多少个功能
角色：不同的权限点的集合
通过给用户分配角色，给角色分配权限点，来给用户添加功能，而且系统中的权限点不可以随意添加
菜单级别权限控制
因为不同用户控制的路由页面可能也会有所不同，这时就不能直接使用路由组件中配置的动态路由和静态路由组合，因为这样的话，每个人登录显示的都是全部页面
①在permission.js路由守卫中（路由跳转时）的有token没有用户信息时，调用route.addRouters()
addRouters动态添加路由
这里使用到路由的addRouters方法，这里需要注意的是，侧边栏的菜单目录不能访问到由addRouters添加的动态路由。
②解决sidebar组件不能访问到addRouters方法获取的路由（生成左侧菜单栏）
将动态路由信息存储到vuex中，也就是需要创建一个新的vuex模块（这里叫menus.js）
store/moudules/menus.js
修改访问路径为从store/moudules/menus.js中
sideBar/index.vue
注意：这里的获取使用只决定了侧边菜单栏的路由显示，渲染菜单的数据改为从vuex中获取 ，路径访问页面依然是由router/index.js决定
③此时的显示还是全部，所以需要将直接从router/index.js中取得的动态路由进行筛选
(permise.js)筛选代码
const menus = store.state.user.userProfileInfo.roles.menus
const filterRoutes = asyncRoutes.filter(route => {
const routeName = route.children[0].name
return menus.includes(routeName)
})
获取到当前用户的真正权限信息之后，在所有动态路由中进行筛选
④store/moudules/menus.js中动态路由的值在路由守卫中获取用户信息时赋值
(permise.js)保存到vuex中
总结：permise.js通过筛选动态路由（除了静态路由以外的路由），将最终筛选的结果给addRoutes用作参数,并且存储到菜单的Vuex中，供sideBar进行使用渲染菜单栏。
最终框架
按钮级别权限控制
思路
用户登陆成功后，用户可以访问的按钮级别权限保存在points数组中。而这个数据我们是保存在vuex中的，所以，就可以在项目的任意地方来中访问。
如果某个按钮上的标识在points出现，则可以显示出来
这里就需要定义一个自定义指令，用来控制按钮级别权限的显示与否
自定义指令回顾
自定义指令
在main.js中,定义全局指令，binding.value绑定了用户在结构上写的标识，判断在获取到的用户角色权限，结构上给定的标识是不是包含在其中，而获取的用户权限点是在vuex的user.js,state.user.userinfo.roles.points中保存。
全局注册自定义指令
// 注册一个全局自定义指令 `v-allow`
Vue.directive('allow', {
inserted: function(el, binding) {
// 从vuex中取出points,
const points = store.state.user.userInfo.roles.points
// 如果points有binding.value则显示
if (points.includes(binding.value)) {
// console.log('判断这个元素是否会显示', el, binding.value)
} else {
el.parentNode.removeChild(el)
// el.style.display = 'none'
}
}
})
这里的：'import_employee'是从标识符来的
规定标识
网友评论