【Vue】vue后台权限设计,RBAC权限管理模型浅析

权限管理分为两大部分:第一部分是针对不同的用户,他们看到的导航链接不同,可以访问的页面不同。第二部分是针对不同的角色,所拥有的权限点不同,也许他可以访问这个页面,但是不一定可以使用这个页面的增删改的功能。

  1. 用户的权限是根据RBAC模型来构建的,给角色分配权限点,给用户分配角色

  1. 如何限制用户访问?

一是通过token验证用户是否处于登录状态;

二是通过动态添加路由规则来限制用户的访问权限。

  1. 如何实现动态的路由规则表?

  1. 先把路由规则表分为没有任何限制的静态路由(如404、登录页、主页) 和动态路由,静态路由是一开始就写在规则表中的,动态路由是通过router.addRoute()来动态添加的。

  1. 然后前端从后端获取过来这个用户可以访问的动态路由数据,将其与所有的动态路由对比,就可以得到用户可以访问的动态路由有哪些了。

  1. 最后通过addRoute()来把动态路由和静态路由进行合并,这样一来,就可以控制用户的访问权限了,用户即使在地址栏上输入了正确的地址也不能访问到该页面(因为路由规则表中匹配不到对应路径和页面)。

  1. 以上几步中,我们对路由表只有添加没有删除,所以还需要在用户登出功能模块中,添加两个功能:一是删除Vuex中保存着的上一个用户的可访问路由表,二是重置路由实例对象,让其重新匹配路由表。

//通过新建一个全新的Router实例,然后将新的 newRouter.matcher 赋给当前页面的管理 Router,以达到重置路由配置的目的
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const createRouter = () => new Router({
     mode: 'history',
     routes: []
})
const router = createRouter()
export function resetRouter () {
     const newRouter = createRouter()
     router.matcher = newRouter.matcher
}

export default router
  1. 自此为止,用户可以访问路由页面的权限管理功能就完成了,但是可以访问这个页面,不代表可以使用这个页面的全部功能,所以下面要开始实现权限功能点的模块。

思路是:为每一个权限点都分配一个唯一标识,比如id,通过mixin或自定义指令来注册全局可用的method方法checkPoint(key),该方法需要传入一个标识,如果服务器返回的用户信息中包含该标识,就代表有这个权限,返回true;没有就代表没有这个权限,返回false,通过返回值来决定按钮是否可用/是否可见。

如:管理员角色有员工管理访问权限(employeeManage),该权限下面有两个功能点:添加员工、删除员工,它们的标识分别是add和del,用户张三登录系统,Vuex中保存着张三的权限信息:可以访问员工管理页面,可以添加员工。页面组件通过把数据传给 checkPoint,结果为true张三就可以使用该功能。

  1. 注意事项:

1.userRoutes 是用户可以访问的所有动态路由的集合 通过addRoutes方法来添加动态路由

// 之所以要在最后添加404路由规则,是为了保证404页面一定在规则表中的最后一个位置
router.addRoutes([...userRoutes, { path: '*', redirect: '/404', hidden: true}])

2. 在使用router.addRoutes方法之后,必须要通过 next(路径) 的方式来跳转 不能用 next() 这是VueRouter的一个缺陷。next(to.path)

你可能感兴趣的:(前端,运维,vue.js)