权限管理整个流程
# 权限管理整个流程
用户管理:帐号的增删改查,为该帐号分配角色
角色管理:角色的增删改查,为该角色分配权限数据
权限管理:需要进行权限管理的页面进行增删改查
权限管理分三部分
- 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也可以