React Router 6 + Ant Design:构建基于角色的动态路由和菜单

要根据用户的角色生成不同的路由菜单并实现权限控制,你可以采取以下步骤:

1. 定义路由配置

首先,你需要定义一个包含所有可能路由的配置文件,例如:

const routes = [
  {
    path: '/dashboard',
    element: <DashboardPage />,
    roles: ['admin', 'manager', 'user']
  },
  {
    path: '/users',
    element: <UsersPage />,
    roles: ['admin']
  },
  {
    path: '/settings',
    element: <SettingsPage />,
    roles: ['admin', 'manager']
  },
  // ...其他路由
];

在这个配置中,每个路由对象都包含一个 roles 属性,用于指定可以访问该路由的角色。

2. 获取用户角色

接下来,你需要从后端API或其他地方获取当前登录用户的角色信息。你可以将这个角色信息存储在React应用的状态中,例如使用React Context或Redux等状态管理库。

3. 过滤路由配置

在渲染路由之前,你需要根据用户的角色过滤路由配置,只保留用户有权访问的路由。你可以定义一个函数来完成这个过滤操作:

import { useContext } from 'react';
import { AuthContext } from './auth-context';

const routes = [ /* 路由配置 */ ];

function filterRoutes(routes, role) {
  return routes.filter(route => route.roles.includes(role));
}

function AppRouter() {
  const { role } = useContext(AuthContext);
  const allowedRoutes = filterRoutes(routes, role);

  return (
    <Routes>
      {allowedRoutes.map(route => (
        <Route
          key={route.path}
          path={route.path}
          element={route.element}
        />
      ))}
    </Routes>
  );
}

在这个示例中,我们使用 useContext 钩子从 AuthContext 中获取用户的角色信息。然后,我们调用 filterRoutes 函数过滤路由配置,只保留用户有权访问的路由。最后,我们使用 Routes 和 Route 组件渲染过滤后的路由。

4. 生成菜单

对于菜单的生成,你可以采用类似的方式,根据用户的角色过滤菜单项,只显示用户有权访问的菜单项。你可以使用Ant Design的 Menu 组件来渲染菜单:

import { Menu } from 'antd';
import { Link } from 'react-router-dom';

function AppMenu({ routes, role }) {
  const allowedRoutes = filterRoutes(routes, role);

  return (
    <Menu>
      {allowedRoutes.map(route => (
        <Menu.Item key={route.path}>
          <Link to={route.path}>{route.name}</Link>
        </Menu.Item>
      ))}
    </Menu>
  );
}

在示例中,我们使用 filterRoutes 函数过滤路由配置,然后在 Menu 组件中渲染剩余的菜单项。每个菜单项都使用 Link 组件链接到相应的路由。

通过这种方式,可以根据用户的角色动态生成路由和菜单,实现基于角色的访问控制。还可以进一步扩展这个解决方案,例如支持嵌套路由和多级菜单、从后端加载路由配置等。