RBAC 权限系统实战（二）：权限信息管理的设计

十五丶
110 阅读3分钟

前言

本篇文章主要讲解 RBAC 权限后台系统下，控制菜单、角色、用户信息与操作

本文也是《通俗易懂的中后台系统建设指南》系列的第十篇文章，该系列旨在告诉你如何来构建一个优秀的中后台管理系统

RBAC 三要素与模块管理

在上篇文章，我们讲 RBAC 权限模型的三要素是用户、角色、权限，那这三要素的信息在后台系统管理中，分别体现在：

  1. 菜单管理：管理系统中全部的菜单权限信息，供角色绑定和侧边栏渲染
  2. 角色管理：对角色信息的展示，给角色绑定权限
  3. 用户管理：对系统用户列表的展示，给用户分配角色

我们写这三个管理模块，主要就是把权限交给系统用户来自定义控制：一个完整的流程是：配置权限信息 => 角色绑定权限 => 用户分配角色 => 用户登录后，只渲染用户角色所拥有的权限路由

image.png

ApiFox 与数据 Mock

下文中全部数据均由 ApiFox 云端 Mock 生成，我也将这个文档在线分享，你可以访问 vue-clean-admin ApiFox 文档

菜单管理

菜单即权限路由数据，这些菜单数据主要提供给角色绑定和侧边栏菜单的渲染，没有这里的菜单数据，角色权限、用户绑定角色的操作都没有意义

列表的字段定义参考上篇文章RBAC 权限系统实战（一）：页面级访问控制全解析的 PermissionRoute 类型定义

菜单模块的代码在 views/manages/menu 文件夹下找到

image.png

这里我们主要讲菜单模块填写表单的一些情况：

  1. 允许为菜单选择菜单图标 meta.icon，在侧边栏菜单中展示，这里封装了一个图标选择器组件 icon-pick.vue，后面有机会可以写篇文章聊一下
  2. 根据菜单类型动态必填字段，比如“目录”类型的菜单，不需要填写 component 字段等
  3. meta 配置，按需配置是否隐藏菜单、菜单排序等

菜单管理的操作接口说明，写在了 ApiFox - 菜单管理 中

image.png

角色管理

角色管理，对于角色信息的 CRUD 操作这里不讲，那在这个模块，我们最主要做一件事：给角色分配权限

角色模块的代码在 views/manages/role 文件夹下找到

image.png

在一个分配权限的弹窗表单中，先拉取全部的菜单数据并渲染，供角色绑定，注意这里选中的是菜单 ID，也就是说，角色分配权限的接口设计中，传回角色 ID、选中的权限 ID 集这两个参数，来更新角色的权限

image.png

用户管理

用户管理这个模块，我们还是比较熟悉的，基本的后台系统都有，在实现用户基本的 CRUD 操作后，我们要做的就是给用户分配角色

在分配角色的弹窗表单中，先拉取到全部的角色列表，回显在下拉框，然后根据用户 ID 查询当前用户已拥有的角色也回显到选中项

注意，用户与角色是一对多的关系，一个用户可以拥有多个角色

接口设计中，传回用户 ID、角色 ID 集两个参数，分配成功后，刷新页面即可拿到最新权限

角色模块的代码在 views/manages/user 文件夹下找到

image.png

最后

这一套操作下来，我们就实现了系统权限的控制，下一篇文章讲细粒度的权限设计时，还会对菜单管理、角色管理有进一步的处理

了解更多

系列专栏地址：GitHub 博客 | 掘金专栏 | 思否专栏

实战项目：vue-clean-admin

交流讨论

文章如有错误或需要改进之处，欢迎指正

avatar
文章
阅读
粉丝