如何在 React Router v6 中实现受保护的 Layout 路由-js教程-PHP中文网

如何在 React Router v6 中实现受保护的 Layout 路由

本文详解如何通过自定义 requireauth 组件保护整个 layout 及其子路由，确保仅已登录用户可访问 / 下所有页面（如 /users、/profile 等），未登录时自动重定向至 /login 并保留返回路径。

本文详解如何通过自定义 requireauth 组件保护整个 layout 及其子路由，确保仅已登录用户可访问 / 下所有页面（如 /users、/profile 等），未登录时自动重定向至 /login 并保留返回路径。

在 React Router v6 中，实现 Layout 级别的权限控制不应直接包裹本身（因其作为父路由容器需始终渲染），而应将认证逻辑下沉至其子路由层级——即对所有需要保护的子路径（如 /users、/profile）统一应用认证守卫。推荐方案是创建一个高阶组件 RequireAuth，利用 Outlet 渲染受保护的嵌套路由，并结合 Navigate 实现条件跳转。

✅ 正确实现方式：为子路由添加 RequireAuth 包装

首先，定义 RequireAuth 组件：

// components/RequireAuth.tsx
import { useLocation, Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth'; // 假设你已有自定义 auth hook

const RequireAuth = () => {
  const { isAuthenticated } = useAuth();
  const location = useLocation();

  if (isAuthenticated) {
    return <outlet></outlet>;
  }

  return (
    <navigate to="/login" state="{{" from: location replace></navigate>
  );
};

export default RequireAuth;

? 关键点：useAuth() 应返回包含 isAuthenticated: boolean 的对象（例如基于 localStorage token 或 context 状态）。确保该 hook 在组件挂载时能同步获取最新认证状态。

接着，在路由配置中，将 RequireAuth 作为 element 的包装器，应用于所有需保护的子路由（而非根 Layout 路径）：

// router.tsx
import { createBrowserRouter } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import Users from './pages/Users';
import Products from './pages/Products';
import Profile from './pages/Profile';
import Login from './pages/Login';
import SignUp from './pages/SignUp';
import RequireAuth from './components/RequireAuth';

const router = createBrowserRouter([
  {
    path: "/",
    element: <layout></layout>, // Layout 本身不校验权限，仅作布局容器
    children: [
      { path: "/", element: <home></home> },
      {
        path: "/users",
        element: <requireauth><users></users></requireauth>
      },
      {
        path: "/products",
        element: <requireauth><products></products></requireauth>
      },
      {
        path: "/profile",
        element: <requireauth><profile></profile></requireauth>
      }
    ]
  },
  { path: "/login", element: <login></login> },
  { path: "/register", element: <signup></signup> }
]);

export default router;

⚠️ 注意事项与最佳实践

不要在 Layout 层做鉴权：是布局壳，若在此处拦截会导致整个应用无法加载（包括登录页），破坏用户体验。

灵活路由的PHP库
灵活路由的PHP库

下载

state.from 的用途：Navigate 中传递的 state.from 可在 Login 组件中读取，登录成功后跳回原目标页（例如从 /profile 跳转登录后自动回到 /profile）：

// Login.tsx
import { useNavigate, useLocation } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();
  const { state } = useLocation();
  const from = state?.from?.pathname || '/';

  const handleLogin = () => {
    // 模拟登录逻辑
    authenticate().then(() => {
      navigate(from, { replace: true }); // 登录后跳转回原页面
    });
  };
};