权限管理整个流程

权限管理整个流程 

# 权限管理整个流程
用户管理：帐号的增删改查，为该帐号分配角色
角色管理：角色的增删改查，为该角色分配权限数据
权限管理：需要进行权限管理的页面进行增删改查
权限管理分三部分
- api
  - 主要后端处理，
  - 前端：响应拦截统一错误处理
- 路由
  1. 将路由分为二大块
     - 静态路由：不需要访问权限的路由
     - 动态路由：需要权限访问的路由
     - 默认只有静态路由
  2. 在获取到用户信息后
     1. 用户信息中包含当前用户能访问的权限页面的数据
     2. 通过和动态路由匹配出能访问的页面的路由信息
     3. 通过addRoutes动态添加到路由上
        1. 出现了一些坑点
           1. 刚添加的路由不能立马使用需要再经过一次导航守卫：
              解决方式：next(to.fullPath)
           -   404问题（刚添加的不能立马使用，如果静态路由中包含*匹配404，就会直接跳转到404）
             - 解决方式：将静态路由中的04匹配删除，通过addRoutes添加到最后
           - 菜单问题
             - 早期 菜单使用this.$router.options.routes，
             - 该值不是响应式的，造成菜单没有对应更新
             - 解决方式
               - 通过vuex存储路由配制数据（和路由配制保持同步）
               - 使用vuex中的路由配制路由实现响应式
           - 退出切换帐号上一个帐号addRoutes添加的路由还能使用
             - 解决方式：退出时重置路由
- 按钮
  - 通过自定义指令当用户信息的按钮权限信息包含当前按钮标识 时正常显示，不包含就不显示
  - v-if/v-show    mixin也可以