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

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

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

如何限制用户访问？

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

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

如何实现动态的路由规则表？

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

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

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

以上几步中，我们对路由表只有添加没有删除，所以还需要在用户登出功能模块中，添加两个功能：一是删除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

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

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

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

注意事项：

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

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

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

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

猜你喜欢