ant design pro實現動態路由以及權限的控制

dynamic-menu-router

ant design pro動態路由權限,目前基於ant design pro1.4.4版本,只用於左側菜單權限的設置和按鈕權限設置,關於最新版本權限的更新,敬請留意(演示請看demo列表)。

對common中menu.js和router.js的拆分和組合(具體細節請參考代碼)

1.將menu.js中的menuData提取出去,暫時放在mock數據中(menuData.js),由於這些數據要用真實的接口來獲取。

2.在router.js中getRouterConfig的底部增長如下代碼。目的是將routerConfig對象經過reducer傳入到models/global中備用。
// eslint-disable-next-line
app._store.dispatch({
type: 'global/saveRouterConfig',
payload: routerConfig,
});
 
 
3.將router.js中getFlatMenuData方法提取到menu.js中(getFlatMenuData:將數據處理爲以路徑爲鍵的數據)。

4. 將router.js中routerConfig和menuData進行合併處理的函數提取到menu.js中,變爲getRouterData(getRouterData:將routerConfig和menuData進行合併)。

5.在models/global.js中的effects中加入fetchMenus(用於獲取最終處理好的路由),在reducers中加入saveRouterConfig(用於將router.js中getRouterConfig放到reduce中)。

6. 在components/utils中加入AppMenu高階組件,用於獲取最終的路由列表。

權限校驗

重寫utils/authority,這個主要用於權限的校驗。

按鈕權限

menuData中增長actions數組,用於存放權限字段,demo-noe頁面用於測試按鈕權限

報錯修改

第一種:將node_modules/history/esm/history.js的esm換位es6便可
./node_modules/history/esm/history.js
Module not found: Can't resolve '@babel/runtime/helpers/esm/extends'

舒適提示

親們,若是幫助到您了,請給個星。 -_-

Github

github地址:https://github.com/hf1120/dynamic-menu-router