前不久做了一个后管项目，里面有大量权限分配的需求，在项目制作过程中，觉得有很多细节，也有许多有趣的地方，于是决定把制作流程系统的整理一下.......
一，认识权限
在制作之前，我觉得大家有必要先理清权限的实现逻辑
使用权限控制是为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标
其中由三个主体组成，分别是：
- 用户：使用系统的人
- 角色：这个系统中有多少个功能
- 权限点：不同权限点的集合
当一个用户登录系统时，我们只需要给他一个角色即可，这个角色将规定用户的权限
无论是谁登录，只要角色不同，那么获取的权限也就不一样
在给这些角色固定的权限点，这样角色就有了自己的权限
当用户获取这个角色时，也就继承了这些权限
二，准备
在理解了上面三者的关系之后，我们就可以开始制作了，首先，得对三者之间的关系进行绑定，将用户与角色绑定，角色与权限点绑定......
三，页面权限
上面的准备工作完成之后，接下来就可以开始注入灵魂了，让这些已经有了联系的数据动起来。
当一个用户点击登录进入系统之后，首先就是确认身份，也就是他自己是什么角色，这将决定他能在这个系统中浏览哪些页面、进行哪些操作。
1，动态路由与静态路由
静态路由是指所有人都能浏览的页面，是固定页面，而动态路由则像一张身份牌，你只有拥有这张身份牌才能浏览这个页面，所以在开始的时候，就要将那些需要权限的页面制作成动态路由。
2，权限数据
权限数据又接口获得，但是我们一定要知道权限数据在哪个里面，通过权限数据可以查看自己是否完成需求。当你给用户分配角色时，权限数据是会发生变化的。
3，制作流程
后管系统的页面权限体现在左边侧边栏上，不同的角色在侧边栏能看到不同的功能模块，所以我们首先要做的，就是实现不同用户登录，侧边栏展现的模块也不相同
1，因为这一需求需要在用户进入主页前完成，所以要在路由跳转时获取数据
2，用户在登录时，自带有身份牌（功能模块），将用户的身份牌（功能模块）与所有的身份牌比较，选出
相同的身份牌，组成新的数组
3，因为vuex能实现全局调用，将新的数组传到vuex进行保存（注意：404页面要放到路由数组最后）
3，在侧边栏进行调用渲染即可
（在退出时记得重置路由）
以上流程涉及了一个关键点：
router.addRoutes([路由配置对象])
或者:
this.$router.addRoutes([路由配置对象])
addRoutes（）方法可以实现动态路由的调用
完成上面流程，页面权限设置就已经完成了，如果以后需要添加模块功能，只需在设置一个动态路由身份牌即可，将身份牌添加给能够使用的用户即可。
三，按钮权限
需要实现的需求：有些用户虽然能访问模块、浏览页面，但是却无法操作具体功能。
1，制作一个全局自定义指令
// 注册一个全局自定义指令 `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'
}
}
})
通过从用户获取的权限数据，判断按钮是否显现，这里用户的权限又我们自己定义，如果某个按钮需要权限，就需要给他定义一个固定值，通过判断用户是否具有这个值来判断他是否能看到这个按钮。
以上便是权限管理的大致流程，希望能帮助到大家......
