ReactJS TSX角色权限控制实现及存储方案咨询

一、路由权限校验的最佳位置：PrivateWrapper.tsx层面 #

优先在PrivateWrapper.tsx（或专门封装的RoleProtectedRoute组件）中做角色校验，而非App.tsx。原因如下：

• 模块化复用：把权限校验逻辑封装成独立组件，所有需要角色控制的路由都能直接复用，避免在根组件App.tsx中堆砌大量判断代码，保持结构简洁。
• 粒度更灵活：可以针对不同路由配置专属的允许角色，比如给学生路由配allowedRoles: ['student']，教师路由配allowedRoles: ['teacher']，扩展性更强。

示例代码（TypeScript）：

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

// 定义角色类型
type Role = 'student' | 'teacher';

interface RoleProtectedRouteProps {
  allowedRoles: Role[];
}

const RoleProtectedRoute = ({ allowedRoles }: RoleProtectedRouteProps) => {
  // 从localStorage或access_token解码获取当前用户角色
  const currentUserRole = localStorage.getItem('userRole') as Role | null;

  // 未登录直接跳转登录页
  if (!currentUserRole) {
    return <Navigate to="/login" replace />;
  }

  // 角色不在允许列表中，跳转至对应专属首页
  if (!allowedRoles.includes(currentUserRole)) {
    return currentUserRole === 'student' 
      ? <Navigate to="/student-main" replace /> 
      : <Navigate to="/teacher-main" replace />;
  }

  // 权限校验通过，渲染目标路由组件
  return <Outlet />;
};

export default RoleProtectedRoute;

路由配置中使用方式：

// App.tsx或独立路由配置文件
import { Routes, Route } from 'react-router-dom';
import RoleProtectedRoute from './components/RoleProtectedRoute';
import MainStudentPage from './pages/MainStudentPage';
import MainTeacherPage from './pages/MainTeacherPage';
import LoginPage from './pages/LoginPage';

function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      {/* 学生专属路由组 */}
      <Route element={<RoleProtectedRoute allowedRoles={['student']} />}>
        <Route path="/student-main" element={<MainStudentPage />} />
      </Route>
      {/* 教师专属路由组 */}
      <Route element={<RoleProtectedRoute allowedRoles={['teacher']} />}>
        <Route path="/teacher-main" element={<MainTeacherPage />} />
      </Route>
      {/* 未匹配路由跳转登录页 */}
      <Route path="*" element={<Navigate to="/login" replace />} />
    </Routes>
  );
}

export default App;

二、用户角色的存储方案 #

两种方案都可行，但必须明确：前端的角色判断仅用于优化体验，最终权限校验必须由后端完成。

1. 存入access_token的JWT payload中

   • 推荐做法：用JWT格式生成access_token，在payload中嵌入用户角色（比如{ "role": "student", "userId": 123 }）。前端可通过解码JWT获取角色（注意：JWT是base64编码而非加密，不能存放敏感信息）。
   • 优势：无需额外存储，角色与token绑定，避免两者信息不一致的问题，减少localStorage冗余。

2. 存入localStorage

   • 可行场景：如果需要快速获取角色（比如页面初始化时直接读取，无需解码token），可以将角色存入localStorage，但要保证和token同步更新（登录时存入，登出时删除）。
   • 注意：localStorage中的角色只能用于UI展示、路由跳转的前置判断，后端必须在每个接口请求时，重新验证token合法性并校验用户角色权限，完全不信任前端传递的角色信息。

核心原则 #

无论选择哪种存储方式，前端的角色控制只是避免无权限用户进入错误页面，真正的权限拦截必须在后端实现：每个接口都要验证token的有效性，并校验用户角色是否具备访问该接口的权限。

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