前言
最近参与了一个基于 qiankun 构建的微前端大型项目,涉及到十几个子应用,基于基座独立开发了一个完善的权限中心模块。而权限中心中涉及到了 模块 > 一级菜单 > n级菜单/按钮 结构的权限管理。
这次的需求是在其中一个子应用的按钮级别的权限管理,在鉴权阶段写了一个小的方法,用来从权限树中查询是否有某一个按钮的权限,从而控制用户对于按钮的使用权限。
需求分析
- 权限的每一层对应的子菜单的键不尽相同。
- 在业务中,从权限树中获取是否拥有该权限。
- 按钮级别的菜单名称可能重复。
设计思路
- 通过对权限树的分析有如下结论:
- 权限树的层级是有限的
- 子菜单对应的键不尽相同,有的是children,有的是functionlist,有的是menulist
- 同一层没有重复的菜单项
- 设计一个可以遍历的数据结构,对结构进行遍历查找
- 能找到且数据结构一致则返回 true,任意一级没有找到则返回 false
代码
因为场景中,需求分析第一条中的原因,不能使用常见的递归方法,所以就结合数据创建一个可以使用递归解决问题的数据结构。
这次使用是使用 do-while 方法进行递归 findmap 模板。至于为何需要三个字段也是因为子菜单对应的键不一样。当然可以改原来的数据结构,但是改起来比较麻烦,而且影响范围太广,所以只能这么做了。
声明查找模板如下
interface finditem { findkey: string // 目标项的key findval: string // 目标项的value childrenkey: string // 子菜单的key } // 查找模板 const findmap = [ {findkey: 'name', findval: "模块a", childrenkey:'functionlist'}, {findkey: 'functionname', findval: '菜单1', childrenkey:'children'}, {findkey: 'functionname', findval: '菜单1-1', childrenkey:'children'}, {findkey: 'functionname', findval: '按钮1-1-3'} ]
接下来就是递归 finditem[]。
很明显,循环体中的查找方法其实有很多种,而我选择了数组的 filter 方法也是临时想到的,数组的方法中有好几个(例如:some/include)也可以实现循环体的结果。
js 版本
/** * 查询是否存在 findmap 的结构数据 * @param arr getjsonv2 接口返回的权限列表 * @param findmap finditem[] * @result boolean */ const isaccessindatabymap = (arr, findmap) => { let findlist = arr // 重置查找范围 let i= 0 // 初始值 let temparr = [] // do { temparr = findlist.filter(item => item[findmap[i].findkey] === findmap[i].findval) if(temparr.length > 0){ findlist = temparr[0][findmap[i].childrenkey] i++ }else{ return false } } while (i< findmap.length); if(temparr.length && i === findmap.length){ return true } }
ts 版本
// tool-is-has-access-in-data-by-map.ts // 声明接口 export interface finditem { findkey: string findval: string childrenkey: string } /** * 查询是否存在 findmap 的结构数据 * @param arr getjsonv2 接口返回的权限列表 * @param findmap finditem[] * @result boolean */ export const isaccessindatabymap:(data:any, findmap:finditem[]) => boolean | undefined = (data:any, findmap:finditem[]) => { let findlist = data // 重置查找范围 let i= 0 // 记录下标 let temparr = [] do { temparr = findlist.filter((item: { [x: string]: string; }) => item[findmap[i].findkey] === findmap[i].findval) if(temparr.length > 0){ findlist = temparr[0][findmap[i].childrenkey] i++ }else{ return false } } while (i< findmap.length); if(temparr.length && i === findmap.length){ return true } };
后记
这个方法记下来的原因其实并不是因为这个场景,而是因为一个解决问题的思路。
常见的树状结构一般来说都是每一层的数据结构都是一样的,只有最后一层没有子元素,这样就可以作为跳出递归条件。而这个场景下虽然每一层数据结构也几乎相同,但是每一层用来 核对 的键值对却不一样。这样一来就需要有 一把尺子 来查找了。
方法不难,难的是如何总结为一个通用的解决方案,完成 从 0 到 1 的过程,进而 从 1 到 n。