API调用下React私有路由无法正常渲染的问题排查

问题根源 #

组件初始化时isLoggedIn的初始值为null，而Axios会话验证请求是异步操作，组件会优先渲染ProtectedRoute。此时!isLoggedIn判定为true，直接触发登录页重定向，等请求返回结果时跳转已经完成，导致权限判断逻辑失效。

修复步骤 #

1. 修正App.js的请求逻辑

将Axios请求移入useEffect钩子（避免组件重复渲染时重复发起请求），同时移除无意义的await（setState是同步操作，无需等待）：

import { useState, useEffect } from 'react';
// 保留原有其他导入

export default function App() {
  const [isLoggedIn, setisLoggedIn] = useState(null);
  const logIn = () => {
    setisLoggedIn(true);
  };
  const logOut = () => {
    setisLoggedIn(false);
  };

  // 组件挂载后仅执行一次会话验证请求
  useEffect(() => {
    Axios.get("http://localhost:3001/login")
      .then(response => {
        setisLoggedIn(response.data.loggedIn);
      })
      .catch(err => {
        // 请求失败时兜底设置登录状态为false
        console.error('会话验证失败:', err);
        setisLoggedIn(false);
      });
  }, []);

  return (
    <section className="App">
      <div className="app">
        <AuthProvider>
          <Routes>
            <Route path='/admin'
                   element={
                     <ProtectedRoute isLoggedIn={isLoggedIn}>
                       <AdminPage />
                     </ProtectedRoute>
                   }
            />
            {/* 保留原有其他路由 */}
            <Route path="/" element={<WhoAreYouPage />} />
            <Route path="/delivery" element={<DeliveryPage/>} />
            <Route path="/login" element={<Login/>} />
            <Route path="/register" element={<Login/>} />
            <Route path="/guest" element={<PotentialLeasePage/>}/>
          </Routes>
        </AuthProvider>
      </div>
    </section>
  );
}

2. 修改ProtectedRoute，等待请求完成再执行权限判断

在ProtectedRoute中增加对isLoggedIn为null的判断，此时代表请求还未完成，返回加载状态而非直接重定向：

import { Navigate } from "react-router-dom";

const ProtectedRoute = ({ isLoggedIn, children }) => {
  // 会话验证未完成时，显示加载状态（可替换为自定义加载组件）
  if (isLoggedIn === null) {
    return <div>加载中...</div>;
  }

  // 请求完成后执行权限判断
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />;
  }
  return children;
};

export default ProtectedRoute;

额外优化建议 #

• 可以将登录状态管理移入AuthProvider中，实现全局状态共享，避免多处重复发起会话验证请求。
• 为加载状态设置超时逻辑，防止因网络问题导致页面一直停留在加载状态。

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