React JS应用中Protected Routes始终返回undefined问题求助

核心问题 #

你遇到的auth始终为undefined的原因有两个：

1. userAuth函数内部发起了异步请求，但函数本身没有返回Promise，同步调用时直接得到undefined
2. React组件渲染是同步过程，异步请求的结果无法在初始渲染时同步获取，必须通过状态管理认证结果

修复方案 #

使用React的useState和useEffect处理异步认证逻辑，同时增加加载状态避免页面异常跳转：

修改后的ProtectedRoute组件 #

import { Outlet, Navigate } from "react-router-dom";
import axios from "axios";
import { useState, useEffect } from "react";

const ProtectedRoute = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const verifyAuth = async () => {
      try {
        const token = localStorage.getItem("token");
        const response = await axios.get("http://localhost:5000/isUserAuth", {
          headers: { "x-access-token": token }
        });
        setIsAuthenticated(response.data.auth);
      } catch (err) {
        // 请求失败或token无效时标记为未认证
        setIsAuthenticated(false);
        console.error("认证失败:", err);
      } finally {
        setIsLoading(false);
      }
    };

    verifyAuth();
  }, []);

  // 加载中显示过渡状态
  if (isLoading) {
    return <div>验证权限中...</div>;
  }

  return isAuthenticated ? <Outlet /> : <Navigate to="/" />;
};

export default ProtectedRoute;

额外注意点 #

检查App.js中的组件引用：你导出的组件是ProtectedRoute，但App.js里写的是<ProtectedRoutes/>，需要统一名称，否则会报错。修改App.js中的对应部分：

<Route element={<ProtectedRoute/>}>
  {/* 子路由保持不变 */}
</Route>

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