欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS遞歸遍歷查詢是否有權限示例詳解

 更新時間:2022年07月25日 11:17:07   作者:紫衣小生  
這篇文章主要為大家介紹了JS遞歸遍歷查詢是否有權限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

前言

最近參與了一個基于 qiankun 構建的微前端大型項目,涉及到十幾個子應用,基于基座獨立開發(fā)了一個完善的權限中心模塊。而權限中心中涉及到了 模塊 > 一級菜單 > N級菜單/按鈕 結構的權限管理。

這次的需求是在其中一個子應用的按鈕級別的權限管理,在鑒權階段寫了一個小的方法,用來從權限樹中查詢是否有某一個按鈕的權限,從而控制用戶對于按鈕的使用權限。

需求分析

  • 權限的每一層對應的子菜單的鍵不盡相同。
  • 在業(yè)務中,從權限樹中獲取是否擁有該權限。
  • 按鈕級別的菜單名稱可能重復。

設計思路

  • 通過對權限樹的分析有如下結論:
    • 權限樹的層級是有限的
    • 子菜單對應的鍵不盡相同,有的是children,有的是functionList,有的是menuList
    • 同一層沒有重復的菜單項
  • 設計一個可以遍歷的數(shù)據(jù)結構,對結構進行遍歷查找
  • 能找到且數(shù)據(jù)結構一致則返回 true,任意一級沒有找到則返回 false

代碼

因為場景中,需求分析第一條中的原因,不能使用常見的遞歸方法,所以就結合數(shù)據(jù)創(chuàng)建一個可以使用遞歸解決問題的數(shù)據(jù)結構。

這次使用是使用 do-while 方法進行遞歸 findMap 模板。至于為何需要三個字段也是因為子菜單對應的鍵不一樣。當然可以改原來的數(shù)據(jù)結構,但是改起來比較麻煩,而且影響范圍太廣,所以只能這么做了。

聲明查找模板如下

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[]。

很明顯,循環(huán)體中的查找方法其實有很多種,而我選擇了數(shù)組的 filter 方法也是臨時想到的,數(shù)組的方法中有好幾個(例如:some/include)也可以實現(xiàn)循環(huán)體的結果。

js 版本

/**
 * 查詢是否存在 findMap 的結構數(shù)據(jù)
 * @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 的結構數(shù)據(jù)
 * @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
    }
};

后記

這個方法記下來的原因其實并不是因為這個場景,而是因為一個解決問題的思路。

常見的樹狀結構一般來說都是每一層的數(shù)據(jù)結構都是一樣的,只有最后一層沒有子元素,這樣就可以作為跳出遞歸條件。而這個場景下雖然每一層數(shù)據(jù)結構也幾乎相同,但是每一層用來 核對 的鍵值對卻不一樣。這樣一來就需要有 一把尺子 來查找了。

方法不難,難的是如何總結為一個通用的解決方案,完成 從 0 到 1 的過程,進而 從 1 到 n。

以上就是JS遞歸遍歷查詢是否有權限示例詳解的詳細內容,更多關于JS遞歸遍歷查詢權限的資料請關注腳本之家其它相關文章!

相關文章

  • JS前端性能指標定位FMP使用詳解

    JS前端性能指標定位FMP使用詳解

    這篇文章主要為大家介紹了JS前端性能指標定位FMP使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • 微信小程序 Flex布局詳解

    微信小程序 Flex布局詳解

    這篇文章主要介紹了微信小程序 Flex布局詳解的相關資料,需要的朋友可以參考下
    2016-10-10
  • 詳解使用koa2完成Excel導入導出

    詳解使用koa2完成Excel導入導出

    這篇文章主要為大家介紹了詳解使用koa2完成Excel導入導出示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • 洋蔥模型?koa-compose源碼解析

    洋蔥模型?koa-compose源碼解析

    這篇文章主要為大家介紹了洋蔥模型?koa-compose源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • JavaScript高級之自定義異常

    JavaScript高級之自定義異常

    在JavaScript中所有的異常都是Error對象,遇到異常就會拋出一個Error對象,這個對象中包含錯誤的描述信息,通過JavaScript提供的異常處理語句,我們可以用結構化的方式來捕捉發(fā)生的錯誤,讓異常處理代碼與核心業(yè)務代碼實現(xiàn)分離,需要的朋友可以參考一下
    2021-12-12
  • 微信小程序 閉包寫法詳細介紹

    微信小程序 閉包寫法詳細介紹

    這篇文章主要介紹了微信小程序 閉包寫法詳細介紹的相關資料,需要的朋友可以參考下
    2016-12-12
  • 原型和原型鏈 prototype和proto的區(qū)別詳情

    原型和原型鏈 prototype和proto的區(qū)別詳情

    原型是function對象下的屬性,它定義了構造函數(shù)的共同祖先,也就是一個父子級的關系,子對象會繼承父對象的方法和屬性,每個實例對象下都有__proto__屬性,通過屬性__proto__指向構造函數(shù)的原型對象,當?shù)竭_末端時,返回null,這樣一層一層向頂端查找,就形成了原型鏈
    2021-10-10
  • 微前端框架qiankun源碼剖析之上篇

    微前端框架qiankun源碼剖析之上篇

    這篇文章主要為大家介紹了微前端框架qiankun的源碼剖析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • JS前端監(jiān)控采集用戶行為的N種姿勢

    JS前端監(jiān)控采集用戶行為的N種姿勢

    這篇文章主要為大家介紹了JS前端監(jiān)控采集用戶行為的N種姿勢,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • uniapp自定義相機實現(xiàn)示例詳解

    uniapp自定義相機實現(xiàn)示例詳解

    這篇文章主要為大家介紹了uniapp自定義相機實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03

最新評論