ant-design-pro动态加载menu菜单

官方文档 ：菜单的高级用法 – Ant Design Pro

我这边使用的是 Ant Design Pro 6.0.beta.1
看使用方法和 v5 版本是一样的，用法也很简单。

Pro 中默认会读取 config/config.tsx 中的 routes 配置作为 ProLayout 的菜单数据来生成菜单，也就是我们经常使用的 routes 文件。

以下为官网摘录

从服务端请求菜单

服务端获取的菜单重定向不生效且 icon 不会自动转化。重定向需要配置在路由中才会生效。 icon 需要手工映射，见下方手工映射本地枚举示例。

在某些情况下，写死的菜单数据可能满足不了我们的需求，Pro 也提供了相应的解决方案来进行远程的菜单数据请求。我们这里需要用到两个 API, menu.request 和 menu.params，request 需要传入一个 promise，它会自动托管 loading，params 修改会触发 request 方便重新请求菜单。

具体的代码实现如下，我们可以在 src/app.tsx 定义 layout 对象，并且导出。看起来可能是这样的：

// https://umijs.org/zh-CN/plugins/plugin-layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?.userid,
      },
      request: async (params, defaultMenuData) => {
        // initialState.currentUser 中包含了所有用户信息
        const menuData = await fetchMenuData();
        return menuData;
      },
    },
  };
};

注意点

• 后端返回的路径仅用作展示，文件中 routes 该配置的仍然需要配置
• 后端返回的菜单名称无作用，菜单名称仍然需要在 locale 中设置
• 后端返回的菜单图标不会直接渲染，需要前端单独做适配

关于菜单图标渲染问题

方案一、手工映射本地枚举

从服务器加载 menu 数据后并使用 icon 渲染，针对后端数据 icon 菜单图标不显示问题

import {
  BookOutlined,
  LinkOutlined,
  AppstoreOutlined,
  SmileOutlined,
  TableOutlined,
  SoundOutlined,
  CrownOutlined,
} from '@ant-design/icons';

// 利用对象进行图标映射
const iconMapping = {
  AppstoreOutlined: <AppstoreOutlined />,
  SmileOutlined: <SmileOutlined />,
  TableOutlined: <TableOutlined />,
  SoundOutlined: <SoundOutlined />,
  CrownOutlined: <CrownOutlined />
}


menu: {  
  // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request  params: {  
    userId: initialState?.currentUser?.userid,  
  },  
  request: async (params: any) => {  
    const menuData = await fetchMenuData();
    menuData?.forEach(  
        (item: any) =>  
          (item.icon = iconMapping[item.icon] ? iconMapping[item.icon] : item.icon),  
      );  
    return menuData;  
  },  
},

方案二、使用 menuDataRender 来重新渲染

官方介绍：ProLayout – 高级布局 – ProComponents (ant.design)

从服务器获取
有些时候我们希望服务器来管理我们的路由，所以希望菜单时服务器进行分发的数据。我们提供了 menuDataRender 来进行修改数据，但是要注意 menuDataRender 会触发重新渲染，并且还会支持的国际化和权限的配置，如果你不需要国际化，建议使用 postMenuData 可以显著的提升性能。

服务器需要返回的数据与 MenuDataItem 相同，menuDataRender 需要返回一个数组，如果你想拥有更好的性能可以试试使用 props 中的 route 属性，这里有个 demo。

这一块官方介绍比较简单，我也没有深入研究，之后有时间可以试一试。附介绍文档 Pro 的 Layout 组件 – Ant Design Pro

最后想吐槽下，AntDesign 系列的文档感觉有点混乱，我不得不通过搜索引擎来查找关键字😓