Core UI React中基于角色的路由实现方案问询

需求说明 #

用户A（假设角色标识为SPMR）仅可访问：Home A、Page A、Page B、Page C
用户B（假设角色标识为ADMIN）仅可访问：Home B、Page B、Page D、Page E

解决方案步骤 #

1. 重构路由配置文件（Route.js） #

按角色分组定义路由，编写接收用户信息的函数返回对应可访问路由：

// 导入所需组件
import HomeA from './path/to/HomeA';
import HomeB from './path/to/HomeB';
import PageA from './path/to/PageA';
import PageB from './path/to/PageB';
import PageC from './path/to/PageC';
import PageD from './path/to/PageD';
import PageE from './path/to/PageE';
import { Navigate } from 'react-router-dom';

// 各角色对应的路由集合
const roleRoutes = {
  SPMR: [
    { path: '/', element: <Navigate to="/homeA" replace /> },
    { path: '/homeA', name: 'Home A', element: <HomeA /> },
    { path: '/pageA', name: 'Page A', element: <PageA /> },
    { path: '/pageB', name: 'Page B', element: <PageB /> },
    { path: '/pageC', name: 'Page C', element: <PageC /> },
  ],
  ADMIN: [
    { path: '/', element: <Navigate to="/homeB" replace /> },
    { path: '/homeB', name: 'Home B', element: <HomeB /> },
    { path: '/pageB', name: 'Page B', element: <PageB /> },
    { path: '/pageD', name: 'Page D', element: <PageD /> },
    { path: '/pageE', name: 'Page E', element: <PageE /> },
  ],
};

// 导出路由生成函数，接收用户信息参数
export const getRoutes = (user) => {
  // 未登录或角色不存在时，返回重定向到登录页的路由
  if (!user?.UserType || !roleRoutes[user.UserType]) {
    return [{ path: '*', element: <Navigate to="/login" replace /> }];
  }
  // 返回对应角色路由+兜底重定向
  return [
    ...roleRoutes[user.UserType],
    { path: '*', element: <Navigate to="/" replace /> },
  ];
};

2. 修改AppContent.js，结合Selector动态渲染路由 #

假设使用Redux管理用户状态，用useSelector获取用户信息；其他状态管理方案替换为对应获取方式即可：

import { useSelector } from 'react-redux'; // 非Redux环境替换为你的状态获取方法
import { Routes, Route, Navigate } from 'react-router-dom';
import { getRoutes } from '../routes';
import { CContainer, CSpinner } from '@coreui/react';
import { Suspense } from 'react';

const AppContent = () => {
  // 通过Selector获取当前用户信息（根据你的状态结构调整selector）
  const user = useSelector(state => state.auth.user);
  
  // 根据用户角色生成可访问路由
  const accessibleRoutes = getRoutes(user);

  return (
    <CContainer className="px-4" lg>
      <Suspense fallback={<CSpinner color="primary" />}>
        <Routes>
          {accessibleRoutes.map((route, idx) => (
            <Route
              key={idx}
              path={route.path}
              exact={route.exact}
              name={route.name}
              element={route.element}
            />
          ))}
          {/* 全局兜底：未匹配路由时重定向到登录页 */}
          <Route path="*" element={<Navigate to="/login" replace />} />
        </Routes>
      </Suspense>
    </CContainer>
  );
};

export default AppContent;

关键说明 #

• 路由分组维护：按角色拆分路由，后续新增角色只需在roleRoutes中添加对应配置
• 角色校验逻辑：在路由生成函数中校验用户角色，未授权时直接重定向到登录页
• Selector的作用：通过状态管理的Selector实时获取当前用户角色，动态生成可访问路由列表
• 兜底路由处理：防止用户手动输入未授权路径，统一重定向到登录页

你之前尝试的问题修正 #

你之前的函数式路由思路是正确的，但需要调整：

1. 重定向要用<Navigate>组件，不能写字符串
2. 要为所有角色定义对应的路由集合，而非单一角色
3. 在AppContent中通过Selector获取用户后，调用路由生成函数再渲染路由

内容的提问来源于stack exchange，提问作者GCT