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

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

目录

前言

需求分析

设计思路

代码

声明查找模板如下

js 版本

ts 版本

后记

前言

最近参与了一个基于 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。

以上就是JS递归遍历查询是否有权限示例详解的详细内容,更多关于JS递归遍历查询权限的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读

    js设置div的边框|怎样给div设置边框

    js设置div的边框|怎样给div设置边框,,1. 怎样给div设置边框1、首先新建一个html文件,输入基本的内容,这里设置一个div,并把它的class设置为de

    js设置样式|js设置样式类

    js设置样式|js设置样式类,,js设置样式    javascript改变CSS样式分为局部和全局,分别如下:  一、局部改变样式    有三种方法:直接

    js用代码实现简单购物车

    js用代码实现简单购物车,,图: 选择所有按钮: 复制代码代码如下所示: 选择 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3

    js设置背景色|js设置颜色

    js设置背景色|js设置颜色,,js设置背景色首先通过js定位到div的子元素,再通过setatteibute方法给属性添加背景色。js设置颜色js改变字体的颜

    Safari调试iOS中的js

    Safari调试iOS中的js,页面,设备,概述对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试Jav

    Bootstrap的js插件之模态框|modal

    Bootstrap的js插件之模态框|modal,模态,饭盒,.modal——指明div元素包裹模态框;.fade——给模态框添加淡入淡出效果;.modal-dialog——包裹

    js默认事件汇总

    js默认事件汇总,事件,表单,默认事件   就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转,右键

    js获取元素宽度

    js获取元素宽度,内联,样式,js获取元素宽度1、使用内联样式,即直接把CSS写在HTML元素的style属性中<div > </div>复制代码通过以下js代码

    SQLite使用JSON扩展

    SQLite使用JSON扩展,插件,加载,一、介绍 SQLite3.9.0之后的版本,添加了JSON扩展。在表中可以保存JSON类型。实际上SQLite将JSON类型的

    jscript.dll是什么

    jscript.dll是什么,系统,文件,论坛,显示,扫描,修复,  jscript.dll是Microsoft JavaScript脚本支持相关文件。属于: Microsoft JScript系统 DLL

    postgresql中对jsonb的查询及转换

    postgresql中对jsonb的查询及转换,数据,字段,表数据:需要将strata排除,并且过滤info字段中为{}的数据,将jsonb转换成text,替换“,{,}见SQL:sele