后台管理系统不同账号看到不一样的页面和功能

2021-08-30 205 阅读2分钟

解决方案

RBAC(Role-Based Access control)权限模型，也就是基于角色的权限分配解决方案。

给用户分配角色显示该用户可以看到的页面
给用户分配权限让该用户可以做什么操作（比如增删改查）

看具体实现

路由和页面是已经写好的路由的name是与后台约定好的字段他俩是相等的
通过动态路由 router.addRoutes() 去添加路由
因为左侧导航是通过router.options v-for循环展示出来的，动态添加的路由在router.options里是看不到的所以需要把动态路由和静态路由添加到vuex里，配合与后台约定好的字段经过筛选在添加到vux里(因为路由的name跟字段相等，所以筛选不就很容易了吗)
v-for不再循环router.options 而是vuex里存的路由信息

动态路由出现的问题

问题1：如果我们刷新浏览器，会发现跳到了404页面,

原因是我们的路由设置中的404页处在中间位置而不是所有路由的末尾了

解决：我们把静态路由 { path: '*', redirect: '/404', hidden: true }通过动态路由去添加

代码：filterRoutes.push({ path: '*', redirect: '/404', hidden: true })

问题2：页面刷新白屏

原因：对于addRoute添加的路由，在刷新时会白屏

   解决:

// 解决刷新出现的白屏bug
next({
  ...to,    // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
  replace: true // 重进一次, 不保留重复历史
})

问题3：退出后，再次登陆，发现菜单异常（控制台有输出说路由重复）；

原因：路由设置是通过router.addRoutes(filterRoutes)来添加的，退出时，并没有清空，再次登陆，又加了一次，所以有重复。

解决：路由设置是通过router.addRoutes(filterRoutes)来添加的，退出时，并没有清空，再次登陆，又加了一次，所以有重复。
```
   在router.index.js加上这个函数，在退出组件引入这个函数并在退出时调用这个函数
   export function resetRouter() {
     const newRouter = createRouter()
     router.matcher = newRouter.matcher // 重置router
   }
```

分配角色

分配权限

v-if="$store.state.user.userInfo.roles.points.includes('xxx')"