rbac权限控制（rbac权限管理系统）



要实现动态Menu，我们需要先来统一一下认知，明确项目中的权限控制系统。 网上找了张图，我们可以大致的看下

从图中，我们可以简单的这样理解RBAC 权限控制体系。

• 用户：我们登录后台管理系统的账号。举个例子：张三这个人，我们可以认为他是一个用户
• 角色：用户的“头衔”。张三是一个销售经理，那么“销售经理”，我们可以认为他是一个角色。
• 权限：每个角色都有不同的权限。“销售经理”这个角色，可以查看、删除、编辑客户资料，那么张三就可以查看、删除、编辑客户资料，这时候如果有个李四，李四是普通的“销售”的角色，而普通的“销售”只能查看客户信息，不能删除、编辑客户信息，所以李四只能查看客户信息。

那么明确好了 的概念之后，接下来我们就可以来去实现我们的辅助业务了，所谓辅助业务具体指的就是：

• 员工管理（用户列表）
  1. 为用户分配角色
• 角色列表
  1. 角色列表展示
  2. 为角色分配权限
• 权限列表
  1. 权限列表展示

我们先直接做好的后台先看看效果，明确下RBAC在我们后台管理系统中的含义。

我们从上面两张图中，可以看到，账号（test），是一个“测试-角色”的角色， 而测试角色的只能看到下面的菜单（权限列表） 而如果我们用超管的账号登录进去，是能看到所有的菜单（权限列表）的

那么由此呈现我们可以看出，整个权限系统其实分成了两部分：

1. 页面权限：根据不同的 权限数据，展示不同的页面（就是展示不同的菜单Menu，因为一个菜单按钮，是对应一个具体的页面）
2. 功能权限：根据不同的 权限数据，一个页面里展示不同的 功能按钮

1. 页面权限实现的核心在于 路由表配置
2. 路由表配置的核心在于 私有路由表
3. 私有路由表 的核心在于 addRoute API

那么简单一句话总结，我们只需要：根据不同的权限数据，利用 addRoute API 生成不同的私有路由表 即可实现 页面权限 功能

而*实现功能权限的核心在于 根据数据隐藏功能按钮，那么隐藏的方式我们可以通过Vue的指令进行控制

首先我们的路由表需要分成公有路由表和私有路由表

• 私有路由表：就是不同角色拥有不同的路由表
• 共有路由表：就是每个角色都有的路由表：例如登录界面、404界面、401界面 讲清了这些下面实现起来也是很简单的，只是一些细节可能要注意，那么直接看代码吧，代码里都有注释
• 创建每一个私有路由表

其中一个路由表的代码，其他都是类似的，要注意的是每个路由表的path是要不和服务端返回的path相同的，我们到时候是根据路由的path去筛选数据的，这里我用到的所有界面都是test-page页面，但不影响具体大逻辑，大家明白就行

• 把每个路由表合并到 中

我们先看下接口返回的数据

从接口返回的数据中我们能可以看出，一级菜单和二级菜单都是有一个url字段的，我们就是要根据这个url字段和我门路由表的path字段去做对表，如果存在，就渲染这个路由，不存在就不去渲染这个路由，所以我们需要先将服务端返回的路由数据，转化成这个格式的数据 筛选路由的具体方法代码

最后，在在 中，获取路由数据之后调用这些代码，相关注释都写到代码里了

到这里动态菜单差不多就讲完了，但还有一个问题，就是如果我们更换和账户的登录，只有手动刷新下页面，左边菜单才会改变，不会自动去改变。这是因为我们退出的时候，没有重置路由表。所以我们在退出的时候，重置下就行了

所以首先我们先去创建这样一个指令（vue3 自定义指令）

1. 我们期望最终可以通过这样格式的指令进行功能受控
2. 以此创建对应的自定义指令

3.在 中绑定该指令

4.在页面中，添加指令

项目地址：github.com/wudengyao/a…

那么到这里我们整个权限受控就算是全部完成了。

整个这一大节中，核心就是 的权限受控体系 。围绕着 用户->角色->权限 的体系是现在在包含权限控制的系统中使用率最广的一种方式。

那么怎么针对于权限控制的方案而言，除了文中提到的这种方案之外，其实还有很多其他的方案，大家可以在我们的话题讨论中踊跃发言，多多讨论。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/jszy-cpgl/47273.html