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
本站公众号
   欢迎关注本站公众号,获取更多信息