React Router v6认证路由问题：已完成用户认证仍跳转登录页

可能的问题原因 #

• 路由守卫判断时机早于认证状态更新
  登录状态如果存在useState等同步状态中，路由初始化的判断逻辑会比useEffect内的认证逻辑、状态更新逻辑更早执行。路由初始化时读取到的还是初始的未认证状态值，直接触发重定向，等useEffect执行完成更新状态时，重定向逻辑已经执行完毕。
• 状态初始化未直接读取持久化存储
  如果你的登录态存储在localStorage/sessionStorage中，不要等useEffect执行才读取存储内容更新状态，初始化状态时就应该直接读取存储内的认证标识，避免初始值为未认证导致路由守卫误判。
  错误写法示例：

  // 初始值设为false，useEffect执行后才更新状态
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  useEffect(() => {
    const token = localStorage.getItem('access_token');
    setIsAuthenticated(!!token);
  }, []);
  

  正确写法示例：

  // 初始化时直接读取存储内容作为初始值
  const [isAuthenticated, setIsAuthenticated] = useState(() => {
    return !!localStorage.getItem('access_token');
  });
  

• 私有路由组件未监听认证状态变化
  检查你封装的私有路由（比如PrivateRoute组件）的判断逻辑，是否将认证状态作为依赖项正确监听。如果状态更新后私有路由没有重新执行认证判断，也会出现认证完成后仍跳转登录页的问题。
• 异步认证逻辑未加加载态拦截
  如果你的认证逻辑需要调用后端接口校验token有效性，属于异步请求，需要新增一个全局加载状态，在请求未完成时不要渲染路由内容、也不要触发重定向逻辑。否则请求还在pending状态时，路由守卫就已经判定为未认证触发跳转。
  处理方案示例：

  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [authLoading, setAuthLoading] = useState(true);
  
  useEffect(() => {
    const verifyToken = async () => {
      try {
        const res = await fetch('/api/auth/verify');
        setIsAuthenticated(res.ok);
      } catch (err) {
        setIsAuthenticated(false);
      } finally {
        setAuthLoading(false);
      }
    };
    verifyToken();
  }, []);
  
  // 认证校验未完成时渲染加载组件，不执行路由逻辑
  if (authLoading) return <div>加载中...</div>;
  
  // 加载完成后再渲染路由逻辑
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/reports" element={
        isAuthenticated ? <Reports /> : <Navigate to="/login" replace />
      } />
    </Routes>
  );
  

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