权限管理---动态路由管理

权限管理的流程

  1. 用户管理:账号的增删改查,为账号分配权限
  2. 角色管理:角色的增删改查,为角色分配权限数据
  3. 权限管理:需要进行权限管理的页面进行增删改查

api

  1. 主要是后端处理
  2. 前端:响应拦截统一处理

路由

  1. 路由分为两大模块
    1. 静态路由:登录页,主页,404等 不需要权限的页面
    2. 动态路由:需要权限管理的页面
    3. 默认为静态路由
  2. 在获取到用户信息后
    1. 用户信息中包括当前用户能访问的权限页面的数据
    2. 通过动态路由匹配出能访问的路由信息
    3. 通过addRoutes动态添加到路由上

坑点

  1. 刚添加的路由不能立马使用需要再经过一次导航守卫
    1. 解决方式:next(to.fullPath)
  2. 404问题(刚添加的不能立马使用,如果是静态路由中包括匹配404就会跳转到404)
    1. 解决方式:将静态路由中的404匹配删除,再通过addRoutes添加到最后
  3. 菜单问题
    1. 早期菜单是通过this.$router.options.routes
    2. 该值不是响应式的,造成菜单没有对应更新
      1. 解决方式:通过vuex存储路由配置数据(和路由配置保持一致)  

      4. 退出切换账号上一个账号addRoutes添加的路由信息还能使用

                   1.解决方法:退出路由时重置路由

       5.按钮    

  1. 通过自定义指令当用户信息的按钮权限信息包含当前按钮标识时正常显示,不包含就不显示

  2. v-if/v-show mixin也可以


版权声明:本文为zengxingX原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。