Vben Admin项目集成补充-权限管理
本以为这个系列可以结束了，结果在具体使用中角色/权限管理碰到了问题，花了一两天研究才发现是关于“树形”选择器普遍的问题，于是重新补充了一篇。
一、需求及问题概述
1、需求
业务需求属于最典型的简化版权限管理，一句话来说就是账号关联角色，角色关联菜单/按钮。
账号角色关联实现非常简单，不存在问题，而角色关联菜单/按钮就涉及到了树形选择器，一般的业务应用会分为一级菜单和二级菜单，二级菜单进入后会打开列表页，列表页展现业务功能管理实体，如角色列表，对角色列表进行新增、修改会打开详情页，列表页和详情页中的按钮一般就挂在二级菜单下面，形成了“一级菜单-二级菜单-按钮”的菜单/按钮树形结构。
而角色就是这棵树的一棵子树，从整棵树中选择了一些按钮（叶节点）以及进入的一二级菜单（枝干节点）。
前后端配合，在用户登录后根据其对应的角色获取可展现的菜单项和按钮，通过正常的管理端登录只能看到有查看权的内容，当然，后端在对应的API接口被调用时还会重新进行权限校验，即便是通过其他方式跳过界面展现直接调取后端接口，也会得到权限不足的错误提示。
需求功能简要分析如下：
（1）权限的继承性，即一旦选中某个菜单项，那么它下一级的菜单或按钮权限都会自动变成“选中”状态；
（2）权限的可达性，即一旦选中某一个菜单项或按钮，那么它上一级（如存在）和上上一级（如存在）都会自动变成“半选中”状态，而当这个菜单项或按钮的所有同级菜单项或同级按钮全部被选中后，它上一级（如存在）的菜单会自动变成“选中”状态；
（3）后端数据的完整性，因后端需要根据用户角色进行菜单和按钮展现，因此不论是“选中”还是“半选中”，后端数据是包含两者的全集，这样才能正确展现用户的各级菜单，且对于后端来说，这两种状态并不需要进行区分，一般都会存放在同一张表里；
（4）前端数据的区别对待，因为前端需要根据“选中”或“半选中”状态分别展示不同的选择框形式，对应图标都有所不同，因此必须将从后端接口获取的数据进行区分，从而进行不同的渲染。
2、重难点分析
前端为了实现类似的需求，使用的就是TreeSelect组件，不管是antd的a-treeselect、element UI的ei-treeselect，还是独立的vue-treeselect。
这些组件在展现层面都已经很好地满足需求，问题在数据提供方面，因为权限管理的基础逻辑在后台实现，前后台只是通过接口来进行数据交换，作为前端的组件无法决定后端实现的业务逻辑，所以无法提供最终的一揽子解决方案。
而项目使用的vben admin是在antd vue的基础上进行封装，TreeSelect是对a-treeselect的封装，本来就没有像a-tree组件或ei-treeselect组件可同时提供半选中节点数据，所以只能自己写代码实现了。
概要整理一下技术实现的重点：
（1）前端-角色/权限新增场景，在调用后端新增接口时，需要整合“选中”和“半选中”数据，一起发送给后端；
（2）前端-角色/权限修改场景，需要从后端接口获取权限列表，并将其区分为“选中”和“半选中”两种，因为树形组件的“半选中”基本都是通过计算得到的，因此只需要将“选中”节点数据进行赋值；
（3）后端-数据模型及接口处理，因菜单/按钮和角色信息一般都是独立的实体表，所以角色与菜单/按钮对应的权限关联信息，一般采用关联表保存，在接口调用时根据用户Id先获取用户归属的角色，再根据角色Id过滤关联表获得菜单/按钮Id列表，最后将对应的菜单/按钮信息返回给前端。
二、解决方案和代码
1、解决思路
整理了公司之前项目的权限实现方案，总共有两种：
方案一：分隔符法
在前后端的数据交换中，将“选中”节点和“半选中”节点使用一个分隔符进行分割，因为节点都是使用正整数序号来表示，分隔符可以选择任意一个负数，即如果“选中”节点为{1,2,3}，而“半选中”节点为{4,5,6}，则前后端交换的数据为{1,2,3,-1,4,5,6}。
（1）后端实现：无特殊逻辑
后端的接口实现不需要有特殊的代码，按照常规的ORM生成代码即可，这里隐含着数据库访问的缺省逻辑，即数据写入和读取都是按照顺序生成的，即数据写入的顺序和数据读出的顺序一致，即分隔符在整个序列中的位置可以保证，一旦对数据库的写入和读出操作进行了顺序方面的特殊配置，那么这个方案的基础就出问题了。
（2）前端实现：按场景区别处理
正因为后端逻辑没有定制，所以前端就需要多做不少事情。
各场景下的公共逻辑：生成“半选中”列表
因为对节点状态进行了区分，所以TreeSelect的选项显示参数要设置为SHOW_ALL，即不论选中的节点是叶节点还是枝干节点，只要是被选择的就都显示在输入框中。
Vben的TreeSelect并没有提供对“半选中”节点的直接访问，所以设置onChange回调函数，在节点选择信息变化后进行实时计算，并保存到“半选中”节点列表中。
场景一：新增角色，需要将“选中节点”（事件回调的入参）、分隔符（如-1）和“半选中”节点进行连接操作，形成完整的节点列表作为接口调用参数传递给后端。
场景二：修改角色，需要将从后端获取的节点列表进行拆分，按照分隔符为界，在分隔符前面的就是“选中”节点，将“选中”节点列表赋值给TreeSelect组件，在用户修改调整后，提交的逻辑与场景一一致，即重新组装“选中”、分隔符和“半选中”节点并传给后端。
方案二：叶节点法
在前后端的数据交换中，同时包含了“选中”节点和“半选中”节点。
（1）后端实现：无特殊逻辑
后端的接口实现不需要有特殊的代码，按照常规的ORM生成代码即可。
（2）前端实现：按场景区别处理
各场景下的公共逻辑：生成“半选中”列表，与方案一相同。
场景一：新增角色，需要将“选中节点”（事件回调的入参）和“半选中”节点进行连接操作，形成完整的节点列表作为接口调用参数传递给后端。
场景二：修改角色，需要将从后端获取的节点列表进行拆分，通过计算将所有的叶节点取出生成列表，赋值给TreeSelect组件。
这里有一个隐含的前提，即现有的TreeSelect组件，都可以根据叶节点自动对枝干节点进行计算，确认其状态为“选中”或“半选中”。
2、核心实现代码
（1）前端公共逻辑代码
核心逻辑：从后端获得所有菜单/按钮的列表（通过getMenuAndBtnList），根据输入框已有的“选中”节点值列表，先过滤出“选中”的列表，然后循环找出其所有父节点，如果该父节点不在“选中”节点列表中，则增加到“半选中”列表中。
// 权限管理数据文件，role.data.ts
// 其他代码
export const menuAndBtnList = await getMenuAndBtnList();
export const halfChecked = new Set();
// 其他代码
export const formSchema: FormSchema[] = [
//其他代码
{
field: 'menuIdList',
label: '授权',
component: 'TreeSelect',
componentProps: {
fieldNames: {
label: 'name',
key: 'menuId',
value: 'menuId',
},
showCheckedStrategy: 'SHOW_ALL',
treeCheckable: true,
getPopupContainer: () => document.body,
treeData: convertMenuToRoute(await getMenuAndBtn()),
onChange: (value) => {
// finding half-checked values
halfChecked.clear();
let item, parentId;
value.forEach((menuId) => {
item = menuAndBtnList.find((menuItem) => menuItem.menuId == menuId);
parentId = item.parentId;
while (parentId != 0) {
if (value.includes(parentId) == false) {
// not in the choosed list, add to half-checked list
halfChecked.add(parentId);
}
item = menuAndBtnList.find((menuItem) => menuItem.menuId == parentId);
parentId = item.parentId;
}
});
},
},
},
// 其他代码（2）分隔符法其他前端代码
核心逻辑：修改时，在获取的的权限列表中查找分隔符-1，并对其之后的节点信息（“半选中”节点）进行删除；新增时，用concat对不同类别节点及分隔符进行拼接。
// 权限管理新增/编辑框文件，roleDrawer.vue
// 其他代码
// 1、修改场景
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
// 其他代码
if (unref(isUpdate)) {
// get the detail information of the role
const record = await getRoleInfo(data.record.roleId);
// dealing with data fetching from server, delete the half-checked nodes, which is splitted by -1
var idx = record.menuIdList.indexOf(-1);
if (idx !== -1) {
record.menuIdList.splice(idx, record.menuIdList.length - idx);
}
setFieldsValue({
...record,
});
}
});
// 其他代码
// 2、新增场景
async function handleSubmit() {
const values = await validate();
// 其他代码
values.menuIdList = [].concat(values.menuIdList, [-1], [...halfChecked]);
if (unref(isUpdate)) {
// update the information of role
await updateRoleInfo(values);
message = '修改角色信息成功';
} else {
// insert new kind of role
await insertRole(values);
message = '新增角色成功';
}
closeDrawer();
emit('success', message);
}
（3）叶节点法其他前端代码
核心逻辑：修改时，根据没有节点的父节点信息指向自己的节点就是叶节点这一判断逻辑，对后端返回的菜单/按钮全量列表和选中的权限值列表进行计算，来查找叶节点；新增时，用concat对不同类别节点进行拼接。
// 权限管理新增/编辑框文件，roleDrawer.vue
// 其他代码
// 1、修改场景
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
// 其他代码
if (unref(isUpdate)) {
// get the detail information of the role
const record = await getRoleInfo(data.record.roleId);
// dealing with data fetching from server, delete the non-leaf nodes
const menuNodes = menuAndBtnList.filter((node) =>
record.menuIdList.some((menuId) => menuId === node.menuId),
);
record.menuIdList = menuNodes
.filter((node) => !menuNodes.some((item) => item.parentId === node.menuId))
.map((item) => item.menuId);
setFieldsValue({
...record,
});
}
});
// 其他代码
// 2、新增场景
async function handleSubmit() {
const values = await validate();
// 其他代码
values.menuIdList = [].concat(values.menuIdList, [...halfChecked]);
if (unref(isUpdate)) {
// update the information of role
await updateRoleInfo(values);
message = '修改角色信息成功';
} else {
// insert new kind of role
await insertRole(values);
message = '新增角色成功';
}
closeDrawer();
emit('success', message);
}