ant design pro 动态路由 menuDataRender
菜单
菜单根据 config.ts 生成。
如果你的项目并不需要菜单,你可以在 src/layouts/BasicLayout.tsx 中设置 menuRender={false}。
从服务器请求菜单
你可以在 src/layouts/BasicLayout.tsx 中修改 menuDataRender,并在代码中发起 http 请求,只需服务器返回下面格式的 json 即可。
menuDataRender 传入参数 MenuDataItem 返回参数 MenuDataItem。
在ProLayout 中menuDataRender 传入了config.ts中配置的routes
const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] => menuList.map((item) => { const localItem = { ...item, children: item.children ? menuDataRender(item.children) : undefined, }; return Authorized.check(item.authority, localItem, null) as MenuDataItem; });
改写:
在用户登录时,获取用户的菜单json格式化后放入localstage中,在menuDataRender 中读取数据
const menuDateRenderDynic = () =>{ const menus = localStorage.getItem('menus')||'[]'; const menuList = JSON.parse(menus) as MenuDataItem; return menuList; }