antdesign pro实现动态路由的菜单

Ant Design Pro 是一个企业级的中后台前端/设计解决方案，它提供了丰富的组件和模板，使得开发者可以快速构建高质量的中后台应用。Ant Design Pro 中的动态路由菜单可以根据用户的权限动态生成菜单，从而提高应用的灵活性和实用性。

下面是实现 Ant Design Pro 动态路由菜单的步骤：

1. 在路由配置文件中设置动态路由：

const routerConfig = [
  {
    path: '/home',
    component: './Home',
    routes: [
      {
        path: '/home/page1',
        component: './Page1',
        name: 'Page1',
        authority: ['admin'],
      },
      {
        path: '/home/page2',
        component: './Page2',
        name: 'Page2',
        authority: ['user'],
      },
    ],
  },
];

在上面的路由配置中，我们设置了两个子路由，分别是 `/home/page1` 和 `/home/page2`。除了设置路由的路径和组件之外，我们还设置了菜单的名称 `name` 和权限 `authority`。`authority` 属性用于控制该菜单项的显示权限，只有具备相应权限的用户才能看到该菜单项。

2. 在菜单配置文件中生成动态菜单：

const menuConfig = {
  routes: [
    {
      path: '/home',
      name: 'Home',
      icon: 'home',
      authority: ['admin', 'user'],
      children: [
        {
          path: '/home/page1',
          name: 'Page1',
          authority: ['admin'],
        },
        {
          path: '/home/page2',
          name: 'Page2',
          authority: ['user'],
        },
      ],
    },
  ],
};

在上面的菜单配置中，我们根据路由配置中设置的 `name` 和 `authority` 属性生成了动态菜单。如果用户具备相应的权限，他们就能看到对应的菜单项。

3. 在页面中加载菜单组件：

import { getMenuData } from '@ant-design/pro-layout';

class Page extends React.Component {
  render() {
    const { routes } = this.props;
    const menuData = getMenuData(routes);
    return (
      <div>
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
          {menuData.map(item => this.renderMenuItem(item))}
        </Menu>
      </div>
    );
  }

  renderMenuItem(menuItem) {
    if (menuItem.children) {
      return (
        <SubMenu key={menuItem.path} title={menuItem.name}>
          {menuItem.children.map(item => this.renderMenuItem(item))}
        </SubMenu>
      );
    } else {
      return (
        <Menu.Item key={menuItem.path}>
          <Link to={menuItem.path}>{menuItem.name}</Link>
        </Menu.Item>
      );
    }
  }
}

在上面的代码中，我们使用 `getMenuData` 函数从路由配置文件中获取动态菜单数据，并使用 Ant Design Pro 的 `Menu` 组件渲染出菜单。如果菜单项包含子菜单项，我们使用 `SubMenu` 组件渲染子菜单，否则使用 `Menu.Item` 组件渲染菜单项。

通过以上步骤，我们就可以实现 Ant Design Pro 动态路由菜单了。通过设置路由配置文件和菜单配置文件，我们可以根据用户的权限动态生成菜单，从而提高应用的灵活性和实用性。