RBAC权限管理（不同用户角色进入到系统能访问的页面不同）

RBAC权限控制（效果图在底部）

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

三个关键点:

用户： 就是使用系统的人（员工）

权限点：这个系统中有多少个功能（例始：有3个页面，每个页面上的有不同的操作）

角色：不同的权限点的集合

通过给不同用户分配不同的角色，实现页面级别的权限管理 。

实现步骤

1.首先我们将路由分为动态路由和静态路由
动态路由：指我们需要分配权限的路由（工资管理，员工管理…）
静态路由：指不需要权限就可以访问的路由（登录，404，首页…）

2.将动态路由筛选过滤
2.1 在路由守卫文件里引入

2.2把进入主页之前获取的用户信息进行筛选，选出当前用户的权限信息返回回来，并存到menus中。
获取到的数据：

筛选数据并返回：

接收 存到menus中：

2.3 过滤引入的动态路由（根据与后端的约定不同，我们自行选择过滤的方法）
我这里和后端约定每个路由里的children的第一个子元素的name为判定的标准 下面是我定义的路由：

过滤的代码：

  // 过滤const filterRoutes = asyncRoutes.filter(route => {//使用filter方法 先循环过滤出每个路由的children的第一个子元素const routeName = route.children[0].name//然后使用includes()方法在当前用户的权限数组里menus筛选出用户可以访问的页面的路由返回出去return menus.includes(routeName)})

2.4 使用 $router.addRoutes() 方法动态添加路由

做完这一步我们就可以通过在浏览器网址上添加路由访问有权限的页面啦
接下来我们把数据存到vuex中准备渲染

3.把数据存到vuex中渲染到页面上
3.1创建存放路由的模块，引入静态路由，先存放进去

// 导入静态路由
import { constantRoutes } from '@/router'
export default {namespaced: true,state: {// 先以静态路由作为菜单数据的初始值menuList: [...constantRoutes]},mutations: {setMenuList(state, asyncRoutes) {// 将动态路由和静态路由组合起来state.menuList = [...constantRoutes, ...asyncRoutes]}}
}

3.2再把过滤好的动态路由通过mutations里的setMenuLis将动态路由和静态路由组合起来

3.3 把当前的菜单渲染的数据改成vuex中过滤好的数据

这样就实现了不同的帐号登陆系统后能看到不同的页面，执行不同的功能的目标了

管理员：
其他员工：

结语：
这里只是做完了页面级别的权限控制， 我们还可以对每个页面里的按钮进行按钮级别的权限控制
比如：管理层可以看到数据进行增，删，改，查 按钮。 普通员工只能查看 。
后期配合后端的接口 我们可以在系统里自行分配用户的角色和角色的权限点 这里就不一一演示了
根据项目的需求不同与和后端的约定不同 此博客仅供参考

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！