React Router v5角色权限路由配置问题及优化咨询

问题原因分析 #

你当前的代码逻辑存在冲突：父路由/institute/*下同时渲染了两个条件块。当student角色访问/institute/lectures时，第一个条件块（允许teacher/student访问）会正确渲染Lectures组件，但第二个条件块（仅允许student访问/institute/student）会因为当前路径不匹配，直接输出<Redirect to="/" />——React会同时渲染这两个块，导致重定向生效，最终把用户踢回首页。

修复当前代码的方案 #

通过嵌套<Switch>确保同一时间只有一个路由/重定向被渲染，避免冲突：

<Switch>
  <Route path="/institute">
    <Switch>
      {/* 教师和学生共享的路由 */}
      <Route exact path="/institute/lectures">
        {user.role === "teacher" || user.role === "student" ? (
          <Lectures />
        ) : (
          <Redirect to="/" />
        )}
      </Route>
      <Route exact path="/institute/modules">
        {user.role === "teacher" || user.role === "student" ? (
          <Modules />
        ) : (
          <Redirect to="/" />
        )}
      </Route>

      {/* 仅学生可访问的路由 */}
      <Route exact path="/institute/student">
        {user.role === "student" ? (
          <Student />
        ) : (
          <Redirect to="/" />
        )}
      </Route>

      {/* 处理/institute根路径或未匹配的子路径 */}
      <Route path="/institute">
        {user.role === "teacher" || user.role === "student" ? (
          <div>学院首页</div>
        ) : (
          <Redirect to="/" />
        )}
      </Route>
    </Switch>
  </Route>
  {/* 其他全局路由 */}
</Switch>

更优的实现方案：封装权限路由组件 #

将权限校验逻辑抽离成可复用的组件，大幅提升代码可维护性：

1. 封装PrivateRoute组件

import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ 
  component: Component, 
  allowedRoles, 
  user, 
  ...rest 
}) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        // 校验用户角色是否在允许列表内
        if (allowedRoles.includes(user.role)) {
          return <Component {...props} />;
        }
        // 无权限则重定向到首页
        return <Redirect to="/" />;
      }}
    />
  );
};

export default PrivateRoute;

2. 使用权限路由简化配置

<Switch>
  {/* 教师、学生共享路由 */}
  <PrivateRoute
    exact
    path="/institute/lectures"
    component={Lectures}
    allowedRoles={["teacher", "student"]}
    user={user}
  />
  <PrivateRoute
    exact
    path="/institute/modules"
    component={Modules}
    allowedRoles={["teacher", "student"]}
    user={user}
  />

  {/* 仅学生可访问路由 */}
  <PrivateRoute
    exact
    path="/institute/student"
    component={Student}
    allowedRoles={["student"]}
    user={user}
  />

  {/* /institute根路径处理 */}
  <Route exact path="/institute">
    {user.role === "teacher" || user.role === "student" ? (
      <div>学院首页</div>
    ) : (
      <Redirect to="/" />
    )}
  </Route>

  {/* 其他全局路由 */}
</Switch>

3. 进阶优化：抽离权限配置

如果路由数量较多，可以把权限规则抽成配置对象，后续修改权限只需更新配置：

// 路由权限配置表
const routeAuthConfig = {
  "/institute/lectures": ["teacher", "student"],
  "/institute/modules": ["teacher", "student"],
  "/institute/student": ["student"],
};

// 修改PrivateRoute组件
const PrivateRoute = ({ component: Component, path, user, ...rest }) => {
  const allowedRoles = routeAuthConfig[path] || [];
  return (
    <Route
      {...rest}
      render={(props) => {
        if (allowedRoles.includes(user.role)) {
          return <Component {...props} />;
        }
        return <Redirect to="/" />;
      }}
    />
  );
};

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