React Router v6如何基于后端返回的动态角色权限处理路由

• 登录阶段全量权限下发：用户账号密码校验通过后，后端直接在登录接口响应体中返回两个核心字段：当前用户的role角色标识（如admin/editor/guest）、permissions细粒度权限码列表（如article:edit/user:delete）。前端拿到数据后存入全局状态管理库（即你当前使用的userInfoStore），同时同步到localStorage/sessionStorage做持久化，避免页面刷新后权限数据丢失。
• 权限元数据维护规则：不建议前后端独立维护两份路由/菜单权限配置，避免版本不一致问题，可根据业务复杂度二选一：
  • 轻量场景：前端维护全量路由+菜单配置，每个配置项增加meta字段，标记允许访问的角色列表、所需权限码
  • 复杂多角色场景：后端在登录接口中同步返回当前用户有权限访问的菜单、路由唯一标识列表，前端直接基于该列表做匹配渲染
• 权限动态同步：当后台调整用户角色/权限后，无需强制用户退出重登，可在接口返回403状态码时，自动触发一次最新权限信息拉取，更新全局状态即可；对权限实时性要求高的系统可通过websocket推送权限变更事件，触发权限重拉。
• 校验边界说明：前端做的路由拦截、菜单隐藏都属于体验层优化，所有后端接口必须独立做权限校验，权限判定完全以后端存储的用户角色/权限数据为准，避免前端代码被篡改后出现越权访问问题。

你当前的实现仅支持单角色校验，缺少细粒度权限支持、登录后回跳、无权限页跳转的逻辑，优化后代码如下：

import { Navigate, useLocation } from 'react-router-dom';
import { userInfoStore } from './auth/login/user-store';

export function PrivateRoute({ 
  children, 
  allowedRoles = [], 
  requiredPermissions = [] 
}) {
  const location = useLocation();
  const userInfo = userInfoStore((state) => state.info);

  // 未登录跳转登录页，记录来源地址用于登录后回跳
  if (!userInfo?.role) {
    return <Navigate to="/auth/login" state={{ from: location }} replace />;
  }

  // 角色校验：未传允许角色默认放行
  const rolePass = allowedRoles.length === 0 || allowedRoles.includes(userInfo.role);
  // 细粒度权限校验：未传要求权限默认放行
  const permPass = requiredPermissions.length === 0 
    ? true 
    : requiredPermissions.every(perm => userInfo.permissions?.includes(perm));

  // 无权限跳转403页面
  if (!rolePass || !permPass) {
    return <Navigate to="/403" replace />;
  }

  return children;
}

• 路由过滤：基于全量路由配置数组，复用上述角色+权限校验逻辑，提前过滤掉当前用户无访问权限的路由项，再通过useRoutes钩子生成最终可访问的路由表注册到应用中，比单纯在路由组件内拦截更彻底。
• 菜单显隐：菜单渲染复用和路由完全一致的权限校验规则，仅渲染当前用户有权限访问的菜单项，不要通过CSS样式隐藏无权限菜单，避免DOM层面泄露敏感入口。
• 异常兜底：增加通配符*路由匹配规则，用户手动输入地址栏访问不存在/无权限路由时，统一跳转至404或403页面，避免出现白屏。

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