前端如何实现权限管理板块的流程和思想

Posted 2022-01-01 热心的前端人员

一、什么是权限管理

        权限管理是指一个角色（如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. 使用