JS遞歸遍歷查詢是否有權(quán)限示例詳解
前言
最近參與了一個(gè)基于 qiankun 構(gòu)建的微前端大型項(xiàng)目,涉及到十幾個(gè)子應(yīng)用,基于基座獨(dú)立開發(fā)了一個(gè)完善的權(quán)限中心模塊。而權(quán)限中心中涉及到了 模塊 > 一級(jí)菜單 > N級(jí)菜單/按鈕 結(jié)構(gòu)的權(quán)限管理。
這次的需求是在其中一個(gè)子應(yīng)用的按鈕級(jí)別的權(quán)限管理,在鑒權(quán)階段寫了一個(gè)小的方法,用來(lái)從權(quán)限樹中查詢是否有某一個(gè)按鈕的權(quán)限,從而控制用戶對(duì)于按鈕的使用權(quán)限。
需求分析
- 權(quán)限的每一層對(duì)應(yīng)的子菜單的鍵不盡相同。
- 在業(yè)務(wù)中,從權(quán)限樹中獲取是否擁有該權(quán)限。
- 按鈕級(jí)別的菜單名稱可能重復(fù)。
設(shè)計(jì)思路
- 通過(guò)對(duì)權(quán)限樹的分析有如下結(jié)論:
- 權(quán)限樹的層級(jí)是有限的
- 子菜單對(duì)應(yīng)的鍵不盡相同,有的是children,有的是functionList,有的是menuList
- 同一層沒(méi)有重復(fù)的菜單項(xiàng)
- 設(shè)計(jì)一個(gè)可以遍歷的數(shù)據(jù)結(jié)構(gòu),對(duì)結(jié)構(gòu)進(jìn)行遍歷查找
- 能找到且數(shù)據(jù)結(jié)構(gòu)一致則返回 true,任意一級(jí)沒(méi)有找到則返回 false
代碼
因?yàn)閳?chǎng)景中,需求分析第一條中的原因,不能使用常見(jiàn)的遞歸方法,所以就結(jié)合數(shù)據(jù)創(chuàng)建一個(gè)可以使用遞歸解決問(wèn)題的數(shù)據(jù)結(jié)構(gòu)。
這次使用是使用 do-while 方法進(jìn)行遞歸 findMap 模板。至于為何需要三個(gè)字段也是因?yàn)樽硬藛螌?duì)應(yīng)的鍵不一樣。當(dāng)然可以改原來(lái)的數(shù)據(jù)結(jié)構(gòu),但是改起來(lái)比較麻煩,而且影響范圍太廣,所以只能這么做了。
聲明查找模板如下
interface findItem {
findKey: string // 目標(biāo)項(xiàng)的key
findVal: string // 目標(biāo)項(xiàng)的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'}
]
接下來(lái)就是遞歸 findItem[]。
很明顯,循環(huán)體中的查找方法其實(shí)有很多種,而我選擇了數(shù)組的 filter 方法也是臨時(shí)想到的,數(shù)組的方法中有好幾個(gè)(例如:some/include)也可以實(shí)現(xiàn)循環(huán)體的結(jié)果。
js 版本
/**
* 查詢是否存在 findMap 的結(jié)構(gòu)數(shù)據(jù)
* @param arr getJsonV2 接口返回的權(quán)限列表
* @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 的結(jié)構(gòu)數(shù)據(jù)
* @param arr getJsonV2 接口返回的權(quán)限列表
* @param findMap findItem[]
* @result boolean
*/
export const isAccessInDataByMap:(data:any, findMap:findItem[]) => boolean | undefined = (data:any, findMap:findItem[]) => {
let findList = data // 重置查找范圍
let i= 0 // 記錄下標(biāo)
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
}
};
后記
這個(gè)方法記下來(lái)的原因其實(shí)并不是因?yàn)檫@個(gè)場(chǎng)景,而是因?yàn)橐粋€(gè)解決問(wèn)題的思路。
常見(jiàn)的樹狀結(jié)構(gòu)一般來(lái)說(shuō)都是每一層的數(shù)據(jù)結(jié)構(gòu)都是一樣的,只有最后一層沒(méi)有子元素,這樣就可以作為跳出遞歸條件。而這個(gè)場(chǎng)景下雖然每一層數(shù)據(jù)結(jié)構(gòu)也幾乎相同,但是每一層用來(lái) 核對(duì) 的鍵值對(duì)卻不一樣。這樣一來(lái)就需要有 一把尺子 來(lái)查找了。
方法不難,難的是如何總結(jié)為一個(gè)通用的解決方案,完成 從 0 到 1 的過(guò)程,進(jìn)而 從 1 到 n。
以上就是JS遞歸遍歷查詢是否有權(quán)限示例詳解的詳細(xì)內(nèi)容,更多關(guān)于JS遞歸遍歷查詢權(quán)限的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
網(wǎng)頁(yè)里控制圖片大小的相關(guān)代碼
網(wǎng)頁(yè)里控制圖片大小的相關(guān)代碼...2006-06-06
微信小程序 天氣預(yù)報(bào)開發(fā)實(shí)例代碼源碼
這篇文章主要介紹了微信小程序 天氣預(yù)報(bào)開發(fā)實(shí)例代碼源碼的相關(guān)資料,這里含有源碼,需要的朋友可以參考下2017-01-01
微信小程序 實(shí)現(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件
這篇文章主要介紹了微信小程序 實(shí)現(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件的相關(guān)資料,需要的朋友可以參考下2017-04-04
JavaScript編程通過(guò)Matlab質(zhì)心算法定位學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript編程中通過(guò)Matlab質(zhì)心算法來(lái)定位的算法學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助2021-10-10
WindiCSS實(shí)現(xiàn)加載windi.config.ts配置文件詳解
這篇文章主要為大家介紹了WindiCSS實(shí)現(xiàn)加載windi.config.ts配置文件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
JSON字符串轉(zhuǎn)換JSONObject和JSONArray的方法
這篇文章主要介紹了JSON字符串轉(zhuǎn)換JSONObject和JSONArray的方法的相關(guān)資料,需要的朋友可以參考下2016-06-06

