如何在 React Router 中实现基于角色的路由控制-js教程-PHP中文网

如何在 React Router 中实现基于角色的路由控制

本文详解如何结合 useAuth 自定义 Hook 与 React Router v6 的组件，通过 allowedRoles 配置动态拦截无权限访问，实现安全、可维护的角色路由控制。

本文详解如何结合 `useauth` 自定义 hook 与 react router v6 的 `` 组件，通过 `allowedroles` 配置动态拦截无权限访问，实现安全、可维护的角色路由控制。

在现代 React 应用中，仅靠前端路由保护并不足以确保安全性（后端仍需校验），但前端角色路由能显著提升用户体验与界面一致性。基于你提供的代码结构，我们可构建一个声明式、可复用、类型友好的角色路由方案，无需修改每个页面组件，也不依赖高阶组件（HOC）或冗余 props 传递。

✅ 核心思路：封装受控路由组件

我们将创建一个 RoleProtectedRoute 组件，它接收 element 和 allowedRoles，内部调用 useAuth 获取当前用户角色，并决定是否渲染目标页面或重定向至 403 页面：

// components/RoleProtectedRoute.tsx
import { Navigate, Outlet, useLocation } from 'react-router-dom';
import useAuth from '../hooks/useAuth';

interface RoleProtectedRouteProps {
  allowedRoles: string[];
  fallbackPath?: string;
}

export default function RoleProtectedRoute({
  allowedRoles,
  fallbackPath = '/auth/unauthorized'
}: RoleProtectedRouteProps) {
  const { status } = useAuth();
  const location = useLocation();

  // 角色匹配逻辑（支持大小写不敏感 + 多角色）
  const hasPermission = allowedRoles.some(
    role => role.toLowerCase() === status.toLowerCase()
  );

  if (!hasPermission) {
    return <navigate to="{fallbackPath}" state="{{" from: location replace></navigate>;
  }

  return <outlet></outlet>;
}

? 注意：是 React Router v6 中用于嵌套路由占位的标准方式；若你使用的是非嵌套路由（如 prop.element 直接传入），也可改用 element 属性并配合 React.createElement 动态渲染（见下文替代方案）。

✅ 改造路由配置与主路由入口

首先，更新 routes.jsx，为每条路由添加 allowedRoles 并统一使用 element 字段（推荐）：

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

// #routes.jsx
import Overview from "./views/Overview";
import Teams from "./views/Teams";
import Apps from "./views/Apps";
import RoleProtectedRoute from "./components/RoleProtectedRoute";

const dashRoutes = [
  {
    path: "/overview",
    element: <overview></overview>,
    layout: "/dashboard",
    allowedRoles: ["admin"] // 保持小写，便于比对
  },
  {
    path: "/teams",
    element: <teams></teams>,
    layout: "/dashboard",
    allowedRoles: ["admin"]
  },
  {
    path: "/apps",
    element: <apps></apps>,
    layout: "/dashboard",
    allowedRoles: ["admin", "engineer"]
  }
];

export default dashRoutes;

然后，在 Dashboard 组件中重构路由渲染逻辑，将角色校验逻辑下沉到层级，而非在 getRoutes() 中硬编码：

// Dashboard.tsx
import { Navigate, Route, Routes, useLocation } from "react-router-dom";
import routes from "#routes";
import useAuth from "../hooks/useAuth";
import RoleProtectedRoute from "./components/RoleProtectedRoute";
import { ChakraProvider } from "@chakra-ui/react";
import theme from "../theme";

export default function Dashboard() {
  const { status } = useAuth();
  const location = useLocation();

  // 过滤出属于 /dashboard 布局的路由
  const dashboardRoutes = routes.filter(
    (route) => route.layout === "/dashboard"
  );

  return (
    <chakraprovider theme="{theme}" resetcss="{false}"><routes>
        {/* 为每条路由包裹 RoleProtectedRoute */}
        {dashboardRoutes.map((route, key) => (
          <route key="{key}" path="{route.path}" element="{" allowedroles="{route.allowedRoles}">
                {route.element}
              
            }
          />
        ))}

        {/* 默认重定向 */}
        <route path="/dashboard" element="{<Navigate" to="/dashboard/overview" replace></route>}
        />

        {/* 404 路由 */}
        <route path="*" element="{<Navigate" to="/auth/notfound" replace></route>} />
      </route></routes></chakraprovider>
  );
}

⚠️ 关键注意事项

角色字段标准化：建议后端返回统一小写角色（如 "admin"），避免 includes("admin") 引发的大小写歧义；若必须保留大写，可在 useAuth 中统一转换。
权限粒度：当前方案基于角色（Role），如需更细粒度（如 can_edit_user），应将 allowedRoles 替换为 requiredPermissions: string[]，并在 useAuth 中返回 permissions: string[] 数组。
SSR/服务端渲染兼容性：此方案纯客户端执行，若需 SSR 支持，请在服务端同步注入用户角色并预渲染对应路由。
错误边界与 UX 提示：建议在 /auth/unauthorized 页面中展示友好提示（如“您无权访问该页面”），并提供返回首页或联系管理员的链接。