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

一、什么是权限管理

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

        

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>