关于RBAC权限设计思想

为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。

其权限模式如下:

RBAC具体有三个关键点

1.用户:也就是使用我们系统的人

2.权限点:这个系统有多少个功能(例如:这个系统有三个页面,每个页面又有不同的操作)

3.角色:不同的权限点分配在不同的角色上

如下图所示 :

通常而言,我们通过给不同的角色分配不同的权限,然后我们再给不同的用户分配不同的角色,从而达到不同的用户,权限不一样

出现的BUG

1.刷新页面时的bug修复

(1)如果我们刷新浏览器，会发现跳到了404页面

(2)对于addRoute添加的路由，在刷新时会白屏

解决方案

把404页改到路由配置的最末尾就可以了

在得到所有的路由之后

filterRoutes.push( // 404 page must be placed at the end !!!
    { path: '*', redirect: '/404', hidden: true })
router.addRoutes(filterRoutes)

2.解决刷新出现的白屏bug

if (!store.getters.userId) {
  // 省略其他...

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

3.退出后，再次登陆，发现菜单异常

原因

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

需要将路由权限重置 (恢复默认) 将来登录后再次追加才可以，不然的话，就会重复添加

解决:通过给定的方案,在删除token和移除个人信息时 ,执行给定的函数

// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重新设置路由的可匹配路径
}
.....................
// 退出的action操作
logout(context) {
  // 1. 移除vuex个人信息
  context.commit('removeUserInfo')
  // 2. 移除token信息
  context.commit('removeToken')
  // 3. 重置路由
  resetRouter()