JS递归遍历查询是否有权限示例详解 JS递归遍历查询是否有权限示例

前言
需求分析
设计思路
代码

声明查找模板如下
js 版本
ts 版本

后记

前言最近参与了一个基于 qiankun 构建的微前端大型项目，涉及到十几个子应用，基于基座独立开发了一个完善的权限中心模块。而权限中心中涉及到了模块 > 一级菜单 > N级菜单/按钮结构的权限管理。
这次的需求是在其中一个子应用的按钮级别的权限管理，在鉴权阶段写了一个小的方法，用来从权限树中查询是否有某一个按钮的权限，从而控制用户对于按钮的使用权限。

需求分析

权限的每一层对应的子菜单的键不尽相同。
在业务中，从权限树中获取是否拥有该权限。
按钮级别的菜单名称可能重复。

【JS递归遍历查询是否有权限示例详解】
设计思路

通过对权限树的分析有如下结论：
- 权限树的层级是有限的
- 子菜单对应的键不尽相同，有的是children，有的是functionList，有的是menuList
- 同一层没有重复的菜单项
设计一个可以遍历的数据结构，对结构进行遍历查找
能找到且数据结构一致则返回 true，任意一级没有找到则返回 false

代码因为场景中，需求分析第一条中的原因，不能使用常见的递归方法，所以就结合数据创建一个可以使用递归解决问题的数据结构。
这次使用是使用 do-while 方法进行递归 findMap 模板。至于为何需要三个字段也是因为子菜单对应的键不一样。当然可以改原来的数据结构，但是改起来比较麻烦，而且影响范围太广，所以只能这么做了。

声明查找模板如下

interface findItem {findKey: string// 目标项的keyfindVal: string// 目标项的valuechildrenKey: 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: stringfindVal: stringchildrenKey: 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。
以上就是JS递归遍历查询是否有权限示例详解的详细内容，更多关于JS递归遍历查询权限的资料请关注脚本之家其它相关文章！