权限控制RBAC小结

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

 

        权限控制一般分为页面级和按钮级别的,页面级一般指路由级别,按钮级一般指特定的按钮权限不够的人员看不到

实现原理是,给不同的员工分配不同的角色,而每个角色控制着不一样的权限点

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()