ant design pro 动态路由 menuDataRender

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; }