根據後端返回列表資料動態生成後台管理系統許可權選單

專案需求：後端返回許可權陣列，前端通過js操作，生成一棵許可權樹，並將這棵樹動態加入路由route中，從而實現動態生成後台管理系統左側選單欄

後端返回的資料：

[,,
,,,,
,,,,
,,,,
,,,,
,,,,
,,,,
]

第一步：將後端返回的列表資料轉換成一棵樹tree

實現**：

// 生成許可權樹
const
createtree
=(arr)
=>
arr.
map(item =>
map[item.resid]
= item
})const routetree =
arr.
foreach
(child =>
else})
return routetree
}

生成的許可權樹：

[
,"children":[
,"children":[
},},
},},
}]},
,"children":[
}]}]
},,"children":[
,"children":[
},},
},},
}]},
,"children":[
}]}]
},,"children":[
,"children":[
},},
},},
}]},
,"children":[
}]}]
}]

第二步：動態生成路由

先上**，後面解釋實現思路：

// router配置檔案
import router from
'@/router'
// vue-template-admin框架自帶
import layout from
'@/layout'
/*routes 後端返回的許可權列表資料*/
const
addrouter
=(routes)
=>
else})
return admintree
} routetree.
foreach
(item =>})
console
.log()
router.
addroutes
(routetree)
return routetree
}

實現思路：

1.後端返回的資料中每一級都有rescode，且是唯一值，符合path的規則定義，因此使用rescode作為每一級路由的path（最開始後端讓我使用他返回sysurl作為跳轉路由，經過了一天多時間的折騰，根本無法實現，因為只有最後一級資料才返回了sysurl（如：/sys/city/subset），一二級的為空值，這是其一，其二這個值每一級也不是唯一的，sys是每一級都通用的，不符合path的唯一性定義，最後決定使用rescode）

2.這個專案使用的是vue-template-admin框架，第一級路由的component載入框架中的layout 元件，第一級以上&最後一級以下（此專案中只有第二級）路由需要手動新增乙個"router-view" 元件

3.由於後端使用最後一級選單路由模組的sysurl作為請求的基礎api，所以在最後一級路由處理時，把sysurl存入meta中，便於後期使用

4.使用router.addroutes( )方法把生成的routes動態新增到專案的router中

5.最後一級路由的component載入（這一步操作可以說是整個許可權選單實現比較精妙的地方，可以巧妙地復用檔案，減少累贅），首先看後端返回的sysurl:

城運微平台 >>後台
通知公告設定
('/sys/city/inform'),
角色管理
('/sys/city/role'),
使用者管理
('/sys/city/user'),
子系統設定
('/sys/city/subset'),
值班列表設定
('/sys/city/duty'),
前台城運子系統列表
('/sys/city/subsys'),
居委微平台 >>後台
通知公告設定
('/sys/nbh/inform'),
角色管理
('/sys/nbh/role'),
使用者管理
('/sys/nbh/user'),
子系統設定
('/sys/nbh/subset'),
值班列表設定
('/sys/nbh/duty'),
前台居委子系統列表
('/sys/nbh/subsys'),
街鎮微平台 >>後台
通知公告設定
('/sys/street/inform'),
角色管理
('/sys/street/role'),
使用者管理
('/sys/street/user'),
子系統設定
('/sys/street/subset'),
值班列表設定
('/sys/street/duty'),
前台街道子系統列表
('/sys/street/subsys'
),

以上資料可以看出，三個微平台下的模組都是一樣的，因此可以利用sysurl的最後乙個值作為檔案目錄（即最後一級載入的component）：

// 最後一級選單根據sysurl（如：/sys/city/subset）的最後乙個值載入對應模組
const file = item.sysurl && item.sysurl.
split
('/')[
3]item.
component
= resolve =>
require([
'@/views/dynamicadmin/'
+ file]
, resolve)

對應的檔案目錄：

單個檔案模組，儲存當前頁面的sysurl，作為請求介面的基礎api（必須使用sessionstorage，如果使用localstorage，同時開啟多個頁面時會獲取不到正確的api）

api.js：拼接上當前頁面的sysurl（即current_api），該檔案可以寫通用api和私有api

到這一步，動態新增許可權路由就完工了，接下來就是在合適的地方使用，呈現選單欄&頁面效果

// 1.頁面重新整理重新設定獲取快取
const
getmenutree=(
)=>
// 2.把動態生成的許可權路由存放vuex的getters中（adminmenutree:getmenutree()）
// 3.在sidebar元件中使用
import
from
'vuex'
computed:
,}

根據後端返回列表資料動態生成後台管理系統許可權選單

vue根據後端選單資料生成動態路由

動態生成列表名稱,資料

根據Django Model動態生成資料表的方法

根據後端返回列表資料動態生成後台管理系統許可權選單

vue根據後端選單資料生成動態路由

動態生成列表 名稱,資料

根據Django Model動態生成資料表的方法

相關推薦

動態生成列表名稱,資料