基于RBAC权限生成动态路由

RBAC 权限

RBAC 权限，就是给职业划分不同的权限职责，再把职业分配给用户

• 这里用三国杀举个例子
  • 身份牌（主公、反贼、忠臣、内奸）就是职业
  • 不同身份具备不同的职责（主公要扫除反贼和内奸，忠臣要保护主公，反贼要干掉主公，内奸要等着和主公单挑）
  • 再把身份分配给玩家 （老三国杀资深玩家了）

动态路由实现

• 获取用户基本信息中的 role 角色字段；
• 使用 includes 方法，从 all async Routes 所有动态路由列表中匹配出当前用户允许访问的路由（role 中的 menu 字段）

坑点1：路由访问有两种方式：

一种是通过侧边栏显示的路由菜单访问，一种是用户直接在浏览器地址输入url访问路由

解决方案：对症下药

• 侧边栏菜单实现：
  • 将原本的 constant Routes 筛选出来的 async Routes 拼接成完整的路由数组，存入 vuex 中以便全局使用；sidebar.vue 侧边栏页面使用这个数组进行菜单渲染即可；
• url访问实现：
  • router/index.js 中默认只有 constant Routes，使用 vue-Router 的 router.addRouters 方法 追加 async Routers

坑点2：权限残留：

高权限用户退出后，低权限用户在没有刷新页面直接登录会有路由残留，也就是后登录者可以访问前登录者的权限页面

解决方案：重置路由

• 用户退出后需要调用 vue-Router 的 resetRouter 方法重置路由

坑点3：执行顺序：

先进入 to.path页面 => 才到 router.addRouters 添加路由，会导致进入了 空白 或 404 页面

404 解决方案：

• 不要把 404路由 放在 contant Routes，而应该在 addRouters 之后，让 404页面 始终位于最后方

空白页 解决方案：

• 跳转的 next() 改为 next(to.path)
• 因为在 addRouters 执行前，已经进行了一次 to.path 的路径匹配，没有匹配上所以 next() 已经做好了返回 通配页面 的准备，唯有 to.path 记录着想要的页面； (原本的 通配页面 是 404页， 404页 移除后变成了 空白页)；