React.js异步认证校验实现受保护路由的问题排查

问题核心 #

你的问题本质是异步认证状态的竞态问题：初始状态下isAuth为false，直接做路由判断会在认证接口返回前就执行重定向；而单纯依赖isLoading跳过判断，又会导致校验完成后未认证的情况无法触发重定向。

正确实现思路 #

用自定义ProtectedRoute组件封装认证逻辑，在组件内部处理异步校验的状态流转，确保只有在认证状态明确后才执行路由渲染或重定向。

代码实现 #

1. 自定义 ProtectedRoute 组件 #

import { useEffect, useState } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { isAuthenticated } from './你的认证工具文件路径';

const ProtectedRoute = () => {
  const [isAuth, setIsAuth] = useState(null); // 初始设为null，明确未完成校验
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const checkAuthStatus = async () => {
      try {
        const authStatus = await isAuthenticated(); // 调用你的API校验函数
        setIsAuth(authStatus);
      } catch (err) {
        setIsAuth(false); // 校验失败视为未认证
      } finally {
        setIsLoading(false);
      }
    };

    checkAuthStatus();
  }, []);

  // 加载中显示占位（比如加载动画/文字）
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 状态明确后处理：已认证则渲染页面，未认证重定向到登录页
  return isAuth ? <Outlet /> : <Navigate to="/" replace />;
};

export default ProtectedRoute;

2. 在 Routes.js 中使用 #

import { Routes, Route } from 'react-router-dom';
import Login from './Login';
import Panel from './Panel';
import ProtectedRoute from './ProtectedRoute';

const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<Login />} />
      {/* 受保护的路由嵌套在ProtectedRoute下 */}
      <Route element={<ProtectedRoute />}>
        <Route path="/panel" element={<Panel />} />
      </Route>
    </Routes>
  );
};

export default AppRoutes;

关键细节说明 #

• 初始isAuth设为null，避免用false作为初始值导致的提前重定向
• 加载状态期间只显示加载占位，不渲染目标页面也不重定向
• 认证接口调用完成后，根据明确的isAuth状态执行后续逻辑，彻底解决竞态问题

内容的提问来源于stack exchange，提问作者O'Niel