antdesignpro 服务端获取动态手风琴

配置

在config.js中配置的路由是不能直接用的，参考下边的删减

  const [menuData, setMenuData] = useState([
    // {
    //   path: '/user',
    //   component: '../layouts/UserLayout',
    //   routes: [
    //     {
    //       name: 'login',
    //       path: '/user/login',
    //       component: './user/login',
    //     },
    //   ],
    // },
    // {
    //   path: '/',
    //   component: '../layouts/SecurityLayout',
    //   routes: [
    // {
    //   path: '/',
    //   component: '../layouts/BasicLayout',
    //   authority: ['admin', 'user'],
    //   routes: [
    {
      path: '/',
      redirect: '/welcome',
    },
    /* 测试 */
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'home',
      component: './welcome/Workplace',
      authority: ['admin'],
    },
    {
      path: '/gift',
      name: 'giftSystem',
      icon: 'gift',
      routes: [
        /* 测试 */
        // {
        //   name: 'giftCreate',
        //   path: '/gift/create',
        //   component: './giftSystem/giftCreate',
        //   hideInMenu: true,
        // },
        {
          name: 'giftList',
          path: '/gift/list',
          component: './giftSystem/giftList',
        },
      ],
    },
    {
      path: '/active',
      name: 'activeSystem',
      icon: 'rocket',
      routes: [
        {
          name: 'selectActive',
          path: '/active/select-active',
          component: './activeSystem/selectActive',
        },
        {
          name: 'createActive',
          path: '/active/create',
          component: './activeSystem/createActive',
          hideInMenu: true,
        },
        {
          name: 'activeManage',
          path: '/active/manage',
          component: './activeSystem/activeManage',
        },
        {
          path: '/active/qrcode',
          name: 'activeQrcode',
        },
        {
          name: 'activeSetting',
          path: '/active/setting',
          component: './activeSystem/activeSetting',
        },
      ],
    },
    {
      path: '/promote',
      icon: 'like',
      name: 'promote',
      routes: [
        {
          name: 'trafficShop',
          path: '/promote/promote',
          component: './promote/trafficShop',
        },
        {
          name: 'flowToPath',
          path: '/promote/flow-to-path',
          component: './promote/flowToPath',
        },
        {
          name: 'myMaterial',
          path: '/promote/my-material',
          component: './promote/myMaterial',
        },
        {
          name: 'addTask',
          path: '/promote/add-task',
          component: './promote/addTask',
        },
        {
          name: 'manage',
          path: '/promote/manage',
          component: './promote/manage',
        },
      ],
    },
    {
      path: '/channel',
      icon: 'reconciliation',
      name: 'channel',
      routes: [
        {
          name: 'channelList',
          path: '/channel/list',
          component: './channel/channelList',
        },
        {
          name: 'crossRegionRecord',
          path: '/channel/cross-region',
          component: './channel/crossRegionRecord',
        },
        {
          name: 'settingField',
          path: '/channel/setting-field',
          component: './channel/settingField',
        },
      ],
    },
    {
      name: 'customer',
      icon: 'smile',
      path: '/customer',
      routes: [
        {
          path: '/customer/list',
          name: 'list',
          component: './customer',
        },
      ],
    },
    {
      path: '/order',
      name: 'order',
      icon: 'reconciliation',
      routes: [
        {
          name: 'awardRecord',
          path: '/order/record',
          component: './order/awardRecord',
        },
        {
          name: 'orderSetting',
          path: '/order/setting',
          component: './order/orderSetting',
        },
      ],
    },
    {
      path: '/dataCenter',
      name: 'dataCenter',
      icon: 'bar-chart',
      routes: [
        {
          name: 'summary',
          path: '/dataCenter/summary',
          component: './dataCenter/summary',
        },
        {
          name: 'cashPrize',
          path: '/dataCenter/cash-a-prize',
          component: './dataCenter/cashPrize',
        },
      ],
    },
    {
      path: '/admin',
      name: 'admin',
      icon: 'crown',
      component: './Admin',
      authority: ['admin'],
    },
    {
      path: '/setting',
      icon: 'setting',
      name: 'setting',
      routes: [
        {
          path: '/setting/account',
          icon: 'crown',
          name: 'settingAccount',
          component: './setting/account',
        },
        {
          name: 'security',
          icon: 'smile',
          path: '/setting/security',
          component: './setting/security',
        },
        {
          name: 'wechatSubscription',
          icon: 'smile',
          path: '/setting/subscription',
          component: './setting/wechatSubscription',
        },
      ],
    },
    {
      path: '/agentSystem',
      icon: 'crown',
      name: 'agentSystem',
      routes: [
        {
          name: 'agentList',
          path: '/agentSystem/agentList',
          component: './agentSystem/agentList',
        },
        {
          name: 'createAgent',
          path: '/agentSystem/create',
          component: './agentSystem/createAgent',
        },
        {
          name: 'agentDetail',
          path: '/agentsystem/agentlist/detail',
          component: './agentSystem/agentList/agentDetail', // hideInMenu: true,
          // TODO 需要在菜单中隐藏
          // hideInMenu: true,
        },
        {
          name: 'agentAudit',
          path: '/agentSystem/agentAudit',
          component: './agentSystem/agentAudit',
        },
      ],
    },
    {
      path: '/enterpriseManage',
      icon: 'database',
      name: 'enterpriseManage',
      routes: [
        {
          name: 'enterpriseList',
          path: '/enterprisemanage/enterpriselist',
          component: './enterpriseManage/enterpriseList',
        },
        {
          name: 'applicationList',
          path: '/enterprisemanage/applicationlist',
          component: './enterpriseManage/applicationList',
        },
      ],
    },
    {
      component: './404',
    },
    //   ],
    // },
    {
      component: './404',
    },
    // ],
    // },
    {
      component: './404',
    },
  ])

ProLayout中的配置

  // menuDataRender={menuDataRender}
       menuDataRender={() => menuDataRender(menuData)}
  // menuDataRender={() => menuData}

如果不采用中间的方式，服务端的权限控制是没用的，需要再走一遍menuDataRender里边的检查权限方法

调教好的demo

https://github.com/withwz/test-antdesignpro-server-menu

参考

https://prolayout.ant.design/menu#%E4%BB%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8A%A0%E8%BD%BD-menu