要实现动态Menu，我们需要先来统一一下认知，明确项目中的权限控制系统。 网上找了张图，我们可以大致的看下 
从图中，我们可以简单的这样理解RBAC 权限控制体系。
- 用户：我们登录后台管理系统的账号。举个例子：张三这个人，我们可以认为他是一个用户
- 角色：用户的“头衔”。张三是一个销售经理，那么“销售经理”，我们可以认为他是一个角色。
- 权限：每个角色都有不同的权限。“销售经理”这个角色，可以查看、删除、编辑客户资料，那么张三就可以查看、删除、编辑客户资料，这时候如果有个李四，李四是普通的“销售”的角色，而普通的“销售”只能查看客户信息，不能删除、编辑客户信息，所以李四只能查看客户信息。
那么明确好了 的概念之后，接下来我们就可以来去实现我们的辅助业务了，所谓辅助业务具体指的就是：
- 员工管理（用户列表）
- 为用户分配角色
- 角色列表
- 角色列表展示
- 为角色分配权限
- 权限列表
- 权限列表展示
我们先直接做好的后台先看看效果，明确下RBAC在我们后台管理系统中的含义。
我们从上面两张图中，可以看到，账号（test），是一个“测试-角色”的角色， 而测试角色的只能看到下面的菜单（权限列表） 而如果我们用超管的账号登录进去，是能看到所有的菜单（权限列表）的
那么由此呈现我们可以看出，整个权限系统其实分成了两部分：
- 页面权限：根据不同的 权限数据，展示不同的页面（就是展示不同的菜单Menu，因为一个菜单按钮，是对应一个具体的页面）
- 功能权限：根据不同的 权限数据，一个页面里展示不同的 功能按钮
- 页面权限实现的核心在于 路由表配置
- 路由表配置的核心在于 私有路由表
- 私有路由表 的核心在于 addRoute API
那么简单一句话总结，我们只需要：根据不同的权限数据，利用 addRoute API 生成不同的私有路由表 即可实现 页面权限 功能
而*实现功能权限的核心在于 根据数据隐藏功能按钮，那么隐藏的方式我们可以通过Vue的指令进行控制
首先我们的路由表需要分成公有路由表和私有路由表
- 私有路由表：就是不同角色拥有不同的路由表
- 共有路由表：就是每个角色都有的路由表：例如登录界面、404界面、401界面 讲清了这些下面实现起来也是很简单的，只是一些细节可能要注意，那么直接看代码吧，代码里都有注释
- 创建每一个私有路由表
其中一个路由表的代码，其他都是类似的，要注意的是每个路由表的path是要不和服务端返回的path相同的，我们到时候是根据路由的path去筛选数据的，这里我用到的所有界面都是test-page页面，但不影响具体大逻辑，大家明白就行
讯享网
- 把每个路由表合并到 中
讯享网
我们先看下接口返回的数据
从接口返回的数据中我们能可以看出，一级菜单和二级菜单都是有一个url字段的，我们就是要根据这个url字段和我门路由表的path字段去做对表，如果存在，就渲染这个路由，不存在就不去渲染这个路由，所以我们需要先将服务端返回的路由数据，转化成这个格式的数据 筛选路由的具体方法代码
最后，在在 中，获取路由数据之后调用这些代码，相关注释都写到代码里了
讯享网
到这里动态菜单差不多就讲完了，但还有一个问题，就是如果我们更换和账户的登录，只有手动刷新下页面，左边菜单才会改变，不会自动去改变。这是因为我们退出的时候，没有重置路由表。所以我们在退出的时候，重置下就行了
讯享网
所以首先我们先去创建这样一个指令（vue3 自定义指令）
- 我们期望最终可以通过这样格式的指令进行功能受控
- 以此创建对应的自定义指令
3.在 中绑定该指令
讯享网
4.在页面中，添加指令
项目地址：github.com/wudengyao/a…
那么到这里我们整个权限受控就算是全部完成了。
整个这一大节中，核心就是 的权限受控体系 。围绕着 用户->角色->权限 的体系是现在在包含权限控制的系统中使用率最广的一种方式。
那么怎么针对于权限控制的方案而言，除了文中提到的这种方案之外，其实还有很多其他的方案，大家可以在我们的话题讨论中踊跃发言，多多讨论。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/152157.html