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递归遍历查询权限的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Node.js 使用递归实现遍历文件夹中所有文件

    如标题所示,遍历文件夹下的所有文件,主要功能如下: 传入一个路径,读取路径里面所有的文件 遍历读取的文件,判断当前文件是文件还是文件夹 当前目录为文件,打印出当前文件绝对路径 当前目录为文件夹,获取文件夹路径,继续读取路径下文件 遍历完目录中的所有文件为止 代码中用到的几个方法 path.resolve(path) 一个路径或路径片段解析成一个绝对路径,返回解析后的路径字符串 fs.readdir(path[,option],callback) 读取目录下面的文件,返回目录下的文件列表对象,如果

  • Javascript如何递归遍历本地文件夹

    打印本地temp folder所有的文件及最后修改时间: <html> <head> <script language="javascript"> var s = ""; var result = []; function FileInfo(path, name,time) { this.path = path; this.name = name; this.time = time; } function showFolderFi

  • JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例

    本文实例讲述了JavaScript实现多叉树的递归遍历和非递归遍历算法操作.分享给大家供大家参考,具体如下: 演示之前的准备工作 演示项目的文件结构: index.html jsonData.js recurrenceTree.js noRecurrenceTree.js 解释一下各个文件: index.html 是用来演示的 HTML 文件. jsonData.js 里面存储着多叉树的JSON数据. recurrenceTree.js 递归算法遍历树. noRecurrenceTree.js

  • JS递归遍历对象获得Value值方法技巧

    一般要用到递归,就要判断对象是否和父类型是否一样,通过本文给大家演示下简单的对象递归,还有数组递归类似. var obj = { a:{w:1,y:2,x:3}, b:{s:4,j:5,x:6}, c:{car:7,cat:8,mao:9} } function f(s){ for(var i in s){ if(typeof s[i]=="object"){ f(s[i]) }else{ console.log(s[i]); } } } f(obj); 返回结果:1,2,3,4,5,

  • JS实现水平遍历和嵌套递归操作示例

    本文实例讲述了JS实现水平遍历和嵌套递归操作.分享给大家供大家参考,具体如下: 程序中存在着一些有意思的逻辑,比如多层嵌套可以用递归遍历,比如同层的if else可以用数组遍历. 下面举例说明,多层嵌套的if else想要递归遍历需要写成下面的形式,以及用特定形式的递归遍历: 多层嵌套的if else转写成的函数 let p1 = false, p2 = true, p3 = false: let test = function() { if (p1) { return '终止1'; } els

  • JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

    废话不多说了,直奔主题,你,具体代码如下所示: <script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.length; i++) { console.log(i+":"+myArr[i]); }; //---------for-in 用来遍历非数组对象 var man ={hands:2,legs:2,heads:1}; //为所有的对象添加cl

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

    目录 前言 需求分析 设计思路 代码 声明查找模板如下 js 版本 ts 版本 后记 前言 最近参与了一个基于 qiankun 构建的微前端大型项目,涉及到十几个子应用,基于基座独立开发了一个完善的权限中心模块.而权限中心中涉及到了 模块 > 一级菜单 > N级菜单/按钮 结构的权限管理. 这次的需求是在其中一个子应用的按钮级别的权限管理,在鉴权阶段写了一个小的方法,用来从权限树中查询是否有某一个按钮的权限,从而控制用户对于按钮的使用权限. 需求分析 权限的每一层对应的子菜单的键不尽相同. 在

  • node运行js获得输出的三种方式示例详解

    一.通过console.log输出(我最喜欢的) 1.js脚本 1.js var arguments = process.argv.splice(2); //获得入参 var a= arguments[0]; 取第一个 console.log(a) //输出 2.python脚本 test_1.py import os print(os.popen('node 1.js fuck').read()) #打印结果fuck 二.通过文件读写获取 1.js脚本 1.js //npm环境别忘了装了 va

  • js前端上传文件缩略图技巧示例详解

    目录 引言 文件对象简介 Blob File FileReader FormData 文件对象之间的关系 缩略图的实现 总结 引言 通常情况下,前端提交给服务器的数据格式为JSON格式,但很多时候用户想上传自己的头像.视频等,这些非文本数据的时候,就不能直接以JSON格式上传到后端了. 当我们要获取用户上传的文件,可以使用input表单项,将type属性值设置为“file”. <form action=""> <input type="file"

  • js中的cookie的读写操作示例详解

    cookie是一小段信息,以键/值对的信息保存在计算机硬盘上的字符串, cookie存储容量大概在4kb,不同的浏览器厂家对cookie大小的限制有微微的差异:cookie主要的本质是"识别",通过识别来做一些事情;cookie 也是无法从你的硬盘取得任何其它数据,传送电脑病毒或者获取你的电子邮件地址.cookie是有有效期的,cookie的默认有效期是从cookie生成至浏览器关闭,也可以通过设置cookie的有效期来指定其失效日期:用户也可以禁止cookie也可以手动删除cooki

  • JS仿照3D手办模型展台实现示例详解

    JS仿照3D手办模型展台实现示例详解

    目录 前言 效果预览 代码片段 style Script 核心科技 获取旋转角度 监听 touch 事件,通过开始.结束坐标计算移动方向 根据坐标计算移动方向 PC端支持 touch 事件 前言 前几年实现的一个 demo 效果,今天翻出来整理下,给大家提供类似场景参考思路. 当时的需求场景是需要 3D 展示手办模型,但是因为甲方预算有限,问有没有其他青春版(性价比)方案. 刚好那段时间在处理 lottie 动画跳帧的问题,就提出了给模型拍个全身照,旋转的时候逐帧播放达到模拟手办模型旋转的动画效

  • Vue.js实现watch属性的示例详解

    Vue.js实现watch属性的示例详解

    目录 1.写在前面 2.watch的实现原理 3.立即执行的watch与回调执行时机 立即执行的回调函数 回调函数的执行时机 4.过期的副作用函数和cleanup 5.写在最后 1.写在前面 在上篇文章中,我们讨论了compted的实现原理,就是利用effect和options参数进行封装.同样的,watch也是基于此进行封装的,当然watch还可以传递第三参数去清理过期的副作用函数.不仅可以利用副作用函数的调度性,去实现回调函数的立即执行,也可以控制回调函数的执行时机. 2.watch的实现原

  • node.js中Util模块作用教程示例详解

    目录 从类型判断说起 严格相等 Error First & Promise 调试与输出 从类型判断说起 在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题. 举几个简单的: console.log(typeof null) // 'object' console.log(typeof new Array) // 'object' console.log(typeof new String) // 'object' 后来,大

  • JS代码计算LocalStorage容量示例详解

    JS代码计算LocalStorage容量示例详解

    目录 LocalStorage 容量 计算总容量 已使用容量 剩余可用容量 LocalStorage 容量 localStorage的容量大家都知道是5M,但是却很少人知道怎么去验证,而且某些场景需要计算localStorage的剩余容量时,就需要我们掌握计算容量的技能了~~ 计算总容量 我们以10KB一个单位,也就是10240B,1024B就是10240个字节的大小,我们不断往localStorage中累加存入10KB,等到超出最大存储时,会报错,那个时候统计出所有累积的大小,就是总存储量了!

  • JS实现大数相加大数相乘示例详解

    目录 JS大数相加.大数相乘 一.实现两个大数相加 二.实现两个大数相乘 JS大数相加.大数相乘 JavaScript 只有一种数字类型,可以使用也可以不使用小数点来书写数字. 在 JavaScript 中,数字不分为整数类型和浮点数类型,所有的数字都是浮点数类型.JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字,此格式用 64 位存储数值.其中 0~51存储数字片段,52~62存储指数,63 位存储符号. 来看看 JavaScript 中数字的最大值和最小值:

随机推荐