React Router v6中ProtectedRoute组件用户认证验证问题排查

相关代码文件 #

app.jsx #

import axios from "axios";
import { createContext, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import NavBar from "./components/Navbar";
import ProtectedRoute from "./components/ProtectedRoute";
import Home from "./pages/Home";
import Login from "./pages/Login";
import MyBlogs from "./pages/MyBlogs";
import Profile from "./pages/Profile";
import Signup from "./pages/Signup";

export const AuthContext = createContext();

const App = () => {
    const [loggedIn, setLoggedIn] = useState(
        Boolean(sessionStorage.getItem("loggedIn"))
    );
    const VUserData = sessionStorage.getItem("userData");
    const [userData, setUserData] = useState(
        VUserData ? JSON.parse(VUserData) : null
    );

    function getUserData() {
        return axios
            .get("/api/user")
            .then((res) => {
                return Promise.resolve(res.data);
            })
            .catch((err) => {
                return Promise.reject(err.response);
            });
    }

    return (
        <BrowserRouter>
            <AuthContext.Provider
                value={{
                    loggedIn,
                    setLoggedIn,
                    userData,
                    setUserData,
                    getUserData,
                }}
            >
                <Routes>
                    <Route path="/" element={<NavBar />}>
                        <Route index element={<Home />} />
                        <Route path="login" element={<Login />} />
                        <Route path="signup" element={<Signup />} />
                        <Route
                            path="profile"
                            element={
                                <ProtectedRoute>
                                    <Profile />
                                </ProtectedRoute>
                            }
                        />
                        <Route
                            path="my-blogs"
                            element={
                                <ProtectedRoute>
                                    <MyBlogs />
                                </ProtectedRoute>
                            }
                        />
                    </Route>
                </Routes>
            </AuthContext.Provider>
        </BrowserRouter>
    );
};

export default App;

ProtectedRoute.jsx #

import { useContext } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { AuthContext } from "../app";

const ProtectedRoute = ({ children, ...rest }) => {
    const { loggedIn, getUserData } = useContext(AuthContext);
    const location = useLocation();

    if (loggedIn) {
        getUserData()
            .then((res) => {
                return children;
            })
            .catch((res) => {
                return (
                    <Navigate
                        to="/login"
                        replace
                        state={{ path: location.pathname }}
                    />
                );
            });
    } else {
        return (
            <Navigate to="/login" replace state={{ path: location.pathname }} />
        );
    }
};

export default ProtectedRoute;

home.jsx #

import React from "react";
import { Outlet } from "react-router-dom";
import NavBar from "../components/Navbar";

const Home = () => {
    return (
        <React.Fragment>
            <NavBar />
            <Outlet />
        </React.Fragment>
    );
};

export default Home;

问题描述 #

登录成功后，Profile页面无法渲染，仅显示空白页面；但如果移除ProtectedRoute.jsx中的getUserData()异步请求逻辑，直接返回children，页面就能正常显示。请问该问题的原因是什么？如何在ProtectedRoute组件中通过后端请求验证用户是否已登录？

原因分析 #

React组件的渲染函数必须同步返回JSX元素或null，你的ProtectedRoute组件在loggedIn为true的分支里，只是调用了异步的getUserData()，但组件本身没有返回任何内容——then/catch里的return属于异步回调函数，不是组件渲染函数的返回值，所以此时组件会返回undefined，导致页面空白。

解决方案 #

需要用React的状态管理（useState）和副作用钩子（useEffect）来处理异步验证逻辑，在组件内部维护验证状态（加载中、验证通过、验证失败），根据不同状态返回对应内容：

修改后的ProtectedRoute.jsx #

import { useContext, useState, useEffect } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { AuthContext } from "../app";

const ProtectedRoute = ({ children }) => {
    const { loggedIn, getUserData, setLoggedIn, setUserData } = useContext(AuthContext);
    const location = useLocation();
    const [isLoading, setIsLoading] = useState(true);
    const [isValid, setIsValid] = useState(false);

    useEffect(() => {
        // 如果本地标记未登录，直接结束
        if (!loggedIn) {
            setIsLoading(false);
            return;
        }

        // 发起后端验证请求
        getUserData()
            .then((userData) => {
                // 验证成功，更新用户数据
                setUserData(userData);
                setIsValid(true);
            })
            .catch(() => {
                // 验证失败，清除本地登录状态
                setLoggedIn(false);
                sessionStorage.removeItem("loggedIn");
                sessionStorage.removeItem("userData");
                setIsValid(false);
            })
            .finally(() => {
                setIsLoading(false);
            });
    }, [loggedIn, getUserData, setLoggedIn, setUserData]);

    // 加载中可以返回加载提示（比如Spinner）
    if (isLoading) {
        return <div>加载中...</div>;
    }

    // 验证通过则渲染子组件，否则跳转到登录页
    return isValid ? children : <Navigate to="/login" replace state={{ path: location.pathname }} />;
};

export default ProtectedRoute;

关键说明 #

1. 状态管理：用isLoading标记异步请求是否完成，isValid标记后端验证结果；
2. 异步处理：在useEffect中发起验证请求，确保组件挂载后执行异步逻辑；
3. 状态同步：验证失败时同步清除本地sessionStorage和Context中的登录状态，避免后续错误；
4. 加载状态：添加加载提示，提升用户体验，避免页面长时间空白。

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