后台管理系统 权限设置大致流程

用户管理：帐号的增删改查，为该帐号分配角色

角色管理：角色的增删改查，为该角色分配权限数据

权限管理：需要进行权限管理的页面进行增删改查

权限管理分三部分

• 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也可以