react框架Ant Design Pro 如何修改动态路由（超详细）

        在使用 React 框架结合 Ant Design Pro 进行项目开发时，动态路由的修改是一项常见且重要的任务。动态路由能够根据用户的角色、权限或者其他运行时的条件来展示不同的页面内容，极大地提升了应用的灵活性和安全性。本文将结合一个完整的示例项目，详细介绍如何在 Ant Design Pro 中修改动态路由。

一、路由配置（通过access来进行权限验证）

export default [
  {
    path: '/user',
    layout: false,
    routes: [
      {
        name: 'login',
        path: '/user/login',
        component: './User/Login',
      },
    ],
  },
  {
    path: '/welcome',
    name: '首页',
    icon: 'smile',
    component: './Welcome',
  },
  {
    path: '/admin',
    name: 'admin',
    icon: 'crown',
    access: 'adminRouteFilter',
    routes: [
      {
        path: '/admin',
        redirect: '/admin/sub-page',
      },
      {
        path: '/admin/sub-page',
        name: 'sub-page',
        component: './Admin',
      },
    ],
  },
  {
    name: '员工管理',
    icon: 'table',
    path: '/employee',
    component: './employee',
    routes: [
      {
        name: '员工管理',
        path: '/employee/index',
        component: './employee',
      },
    ],
  },
  {
    name: '权限管理',
    icon: 'table',
    path: '/permission',
    component: './permission',
    access: 'adminRouteFilter',
    routes: [
      {
        name: '权限管理',
        path: '/permission/index',
        component: './permission',
      },
    ],
  },
  {
    name: '组织管理',
    icon: 'table',
    path: '/company',
    component: './company',
    access: 'adminRouteFilter',
    routes: [
      {
        name: '组织管理',
        path: '/company/index',
        component: './company',
      },
    ],
  },
  {
    name: '薪资管理',
    icon: 'table',
    path: '/basePay',
    component: './basePay',
    routes: [
      {
        name: '薪资管理',
        path: '/basePay/salary',
        component: './basePay/salary',
      },
    ],
  },
  {
    name: '项目管理',
    icon: 'table',
    path: '/item',
    component: './item',
    routes: [
      {
        name: '项目管理',
        path: '/item/index',
        component: './item',
      },
    ],
  },
  {
    name: '招聘管理',
    icon: 'table',
    path: '/recruiting',
    component: './recruiting',
    routes: [
      {
        name: '招聘管理',
        path: '/recruiting/index',
        component: './recruiting',
      },
    ],
  },
  {
    name: '合同协议',
    icon: 'table',
    path: '/agreement',
    component: './agreement',
    access: 'adminRouteFilter',
    routes: [
      {
        name: '合同协议',
        path: '/agreement/index',
        component: './agreement',
      },
    ],
  },
  {
    name: '意见反馈',
    icon: 'table',
    path: '/feedback',
    component: './feedback',
    routes: [
      {
        name: '意见反馈',
        path: '/feedback/index',
        component: './feedback',
      },
    ],
  },
  {
    name: '消息中心',
    icon: 'table',
    path: '/message',
    component: './message',
    access: 'adminRouteFilter',
    routes: [
      {
        name: '消息中心',
        path: '/message/index',
        component: './message',
      },
    ],
  },
  {
    path: '/',
    redirect: '/welcome',
  },
  {
    path: '*',
    layout: false,
    component: './404',
  },
];

二、动态路由实现步骤

        步骤1：配置路由访问权限

{
  name: '薪资管理',
  path: '/basePay',
  component: './basePay',
  access: 'normalRouteFilter', // 对应access中的策略
  routes: [
    {
      path: '/basePay/salary',
      component: './basePay/salary',
      access: 'departmentFilter' // 子路由可单独设置权限
    }
  ]
}

        步骤2：权限控制

// src/access.ts
const adminRoutes = ['dashboard', 'user', 'admin', 'employee', 'permission', 'company', 'basePay', 'item', 'recruiting', 'agreement', 'feedback', 'message'];
const normalRoutes = ['dashboard', 'user', 'employee', 'basePay', 'item', 'recruiting', 'feedback'];
const allUserRoutes = ['welcome'];

export default function (initialState = {}) {
  // 存储的当前账号
  const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}').account;
  const isAdmin = userInfo === 'admin';
  const hasRoutes = isAdmin ? adminRoutes : normalRoutes;
  return {
    adminRouteFilter: () => isAdmin, // 只有管理员可访问
    normalRouteFilter: (route) => hasRoutes.includes(route.name), // initialState 中包含了的路由才有权限访问
    allUserRouteFilter: (route) => allUserRoutes.includes(route.name),
  };
}