如何为React Router的ProtectedRoute添加角色权限校验？

我们可以通过以下步骤完善ProtectedRoute的角色权限校验逻辑：

1. 修正组件参数解构：原代码中user参数的解构方式错误，需将所有props统一纳入一个对象解构
2. 添加角色权限校验：在确认用户已认证后，校验当前用户角色是否在allowedRoles数组内
3. 处理无权限跳转：若用户角色不在允许列表中，跳转至/unauthorized页面并记录原访问位置

修改后的protectedRoute.js代码如下：

import { useLocation, Navigate, Outlet } from 'react-router-dom';

const ProtectedRoute = ({ isAuthenticated, user, allowedRoles }) => {
  const location = useLocation();

  // 未登录状态：跳转至登录页
  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  // 已登录但无权限：跳转至无权限页
  const hasPermission = allowedRoles.includes(user?.role);
  if (!hasPermission) {
    return <Navigate to="/unauthorized" state={{ from: location }} replace />;
  }

  // 有权限：渲染子路由内容
  return <Outlet />;
};

const AnonymousRoute = ({ isAuthenticated }) => {
  return isAuthenticated ? <Navigate to="/" replace /> : <Outlet />;
};

export { ProtectedRoute, AnonymousRoute };

关键逻辑说明： #

• 参数修正：将user和allowedRoles纳入props解构，确保能正确获取传入的角色列表与用户信息
• 安全校验：使用可选链user?.role避免用户未登录时user为null引发的报错
• 跳转记录：通过state={{ from: location }}保存用户原本要访问的路径，后续可用于权限恢复后的定向跳转

你的App.js中已经正确传入了allowedRoles和user参数，无需修改即可直接使用上述组件。

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