【低代码】角色和权限的解决方案

低代码的角色和权限

基于Vue3 + UI 库，实现角色和权限的维护，依赖低代码的 JSON 而设计。

普通项目也可以使用，只是由于没有现成的 JSON，显得稍微麻烦一些。

角色和权限，我是一直都觉得挺简单的，甚至都不需要一开始就去设计角色。因为，开发项目的时候，按照“原子”级别设置功能模块，然后把权限设置到字段。这样，项目开发完毕再去设置角色也不迟，甚至可以让客户自行维护

主要内容

• 权限的分类
• 权限、角色、用户的关系
• 定义相关的接口
• 实现角色的权限的维护方式

权限的分类

以前权限可以分为操作权限和资源权限，现在前后端分离，可以加上后端API的权限。

• 操作权限：用户可以做哪些操作，比如打开某个模块，使用添加、修改、审批等操作。
• 资源权限：用户可以使用哪些数据，比如只能维护自己的客户信息，不能看别人的客户信息等。
• 后端API权限：用户可以使用哪些API。

整理一下画了一个脑图：

其中后端 API 可以和操作按钮相对应，比如拥有【添加按钮】的权限的话，那么就应该有对应的后端 API 的权限，否则如何提交数据呢？

当然还有一些后端 API 和操作按钮没有明显的对应关系，这种情况需要单独设置，比如访问“字典”的权限。

权限、角色和用户的关系

一个角色可以有“一组”权限，一个用户可以有多个角色，一个角色也可以有多个用户。这样就建立了一个简单的关联关系。

定义接口

总体思路有了我们开始设计接口。好吧，其实以前是直接设计关系型数据库的，不过现在喜欢先设计接口。

• 角色和权限
• 角色里的用户
• 权限的备选容器* 模块列表* 模块里的操作按钮* 模块的列* 模块的查询条件* 模块的资源权限* 模块的后端API

IRole 角色和权限

一个角色拥有哪些权限？我们来罗列一下：

type idType = number | string

/**
 * （一个）角色拥有的一组权限
 */
export interface IRole {roleId: idType, // 角色编号roleName: string, // 角色名称rolePower: { // 角色拥有的权限集合moduleIds: Array<idType>, // 可以使用哪些模块buttonIds: {[moduleId: idType]: Array<idType> // 模块里面可以使用的操作按钮},gridIds: {[moduleId: idType]: Array<idType> // 模块里可以使用的列（字段）},findIds: {[moduleId: idType]: Array<idType> // 模块里可以使用的查询条件（字段）},gridIdsNot: {[moduleId: idType]: Array<idType> // 列表里面不可以用的列},findIdsNot: {[moduleId: idType]: Array<idType> // 列表里面不可以使用的查询字段},resources: {[moduleId: idType]: Array<idType> // 模块可以加载的资源权限},APIs: {[moduleId: idType]: Array<idType> // 模块里的特殊的后端API}}
} 

IRoleUser 角色的用户

/**
 * 角色和用户的关联，基于关系型数据库
 */
export interface IRoleUser {roleUserId: idType,roleId: idType,userId: idType,
}

/**
 * 一个用户可以用多个角色
 */
export interface IUserRole {userId: idType,roleIds: Array<idType>
} 

IRoleUser 是按照关系型数据库设置的，IUserRole 是按照对象的思路做的，一个用户有哪些角色。

IR