一、什么是权限管理

        权限管理是指一个角色（如vip和非vip）在一个系统中只能使用指定的功能并且只能访问指定的界面，权限管理是一个项目当中必不可少的部分。

二、如何做到权限管理功能

注意:  新版 Vue Router 中用 router.addRoute 来替代原有的 router.addRoutes 来动态添加路由、子路由。

路由分为两块：

1. 不需要权限访问的路由，比如登录页面、404页面，有时首页也不需要。
2. 需要权限访问的路由     

        用户登录后后端会返回一个当前用户的权限标识，前端通过给定的权限标识筛选出用户能够访问的有权限的路由，先把筛选出来的有权限的路由通过 addRoutes 添加到实例上，目的是为了可以通过地址栏访问，然后把筛选出来有权限的动态路由存储到 vuex 中，目的是为了能够在菜单栏中体现。

注意：这里的 addRoutes 有一定的缺陷，它在导航守卫进行完一次后才会添加新配置的路由，所以需要让它再走一次导航守卫才能够使用。

三、权限管理整体流程

1.api接口

        主要后端负责，前端负责请求响应拦截统一处理

2.路由

• 静态路由：不需要访问权限的路由
• 动态路由：需要权限访问的路由
• 默认只有静态路由

1. 用户登陆后获取用户信息，匹配该用户有权访问的动态路由
2. 将以用户信息匹配到的动态路由利用 addRoutes 添加到路由上 注意：    1.addRoutes 有一定的缺陷，它刚添加的路由必须再经过一次导航守卫才能触发，导航守卫经过第一次是不会触发的，解决方法是在路由守卫上再通过 next(to.fullPath) 再经过一次    2.刚添加的404页面不能立马使用，如果静态路由中包含用 * 匹配的404，那么会直接跳转到404，解决方法是将静态路由的404删除，通过 addRoutes 在最后添加404  
3. 菜单栏问题:         早期我们使用 this.$router.options.routes 来进行菜单栏的渲染，但是该值并不是响应式的，所以菜单并不会通过动态路由发生更新，这时，我们可以通过 vuex 的存储路由配置数据，因为其就是实现数据和视图的同步双向绑定的，和路由配置保持一致。
4. 退出后上一个账号留存下来 addRoutes 添加的路由还能使用         退出时重置路由即可  

   // 路由实例化
   const createRouter = () =>
     new Router({
       // mode: 'history', // require service support
       scrollBehavior: () => ({ y: 0 }),
       // 这里放的是静态路由
       routes: constantRoutes
     })
   
   const router = createRouter()
   
   // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
   // 重置路由 只需要在退出登陆时调用即可
   export function resetRouter() {
     const newRouter = createRouter()
     router.matcher = newRouter.matcher // reset router
   }

3.按钮管理 

        有些按钮也是需要权限来判断是否显示，这时就可以通过自定义指令来解决。

  自定义指令

1. 定义一个全局自定义指令 新建一个directives文件夹，通过 export defaults {} 暴露对象，然后开始定义指令  

   export default {
     自定义指令名: {
       // 渲染后钩子函数
       inserted(dom, obj) {},
       // 更新后钩子函数
       componentUpdated(dom, obj) {},
       // 解绑后钩子函数
       unbind(dom) {}
     }
   }

2. 导入全局自定义指令  

   /* 导入全局自定义指定
   Vue.directive(指令名,{生命周期}) */
   import directivesJs from '@/directives'
   
   

3. 挂载自定义指令  

   /* 这里通过 Object.key() 方法获取所有自定义指令名，以便自动注册 */
   Object.keys(directivesJs).forEach((item) => {
     Vue.directive(item, directivesJs[item])
   })

4. 使用