React PrivateRoute组件陷入无限循环问题排查与解决

问题背景 #

我正在使用ReactJS及React Router DOM库开发Web应用，该应用包含认证系统并用于部分路由，示例路由配置如下：

<Routes>
        <Route path="/" element={<Login />} />
        <Route path="/dashboard" element={ <PrivateRoute><Dashboard /></PrivateRoute>} />
        <Route path="/profile" element={ <PrivateRoute><Profile /></PrivateRoute>} />
</Routes>

我的<PrivateRoute>组件代码如下：

import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../contexts/authContext';

export default function PrivateRoute({ children }) {
    const { accessToken, loading, refreshUser, verifyToken } = useContext(AuthContext);
    const navigate = useNavigate();

    const doRefresh = async () => {
        if(await refreshUser()){
            return children;
        }
        navigate('/');
        return;
    }

    if(loading){
        return <div></div>;
    }

    if(!accessToken){
        doRefresh();
    }

    if(accessToken){
        const verify = async () => {
            if(await verifyToken()){
                return children;
            }
            doRefresh();
        }

        verify();
    }

    return children;

}

预期逻辑：用户访问私有路由时，组件检查accessToken是否为空，为空则执行doRefresh()获取新accessToken；若accessToken存在则验证其有效性，有效则渲染子组件，无效则尝试刷新token。

实际问题：用户登录后，<PrivateRoute>组件持续重复渲染，verify函数也在不断执行。

原因分析 #

• 异步函数触发无限渲染循环：直接在组件渲染阶段调用doRefresh、verify这类异步函数，这些函数执行时会修改AuthContext中的状态（比如更新accessToken或loading），状态更新会触发组件重新渲染，重新渲染后又会再次调用异步函数，形成循环。
• 未控制执行时机：没有使用React的useEffect钩子来限制异步逻辑的执行时机，导致组件每次渲染都会重复触发认证检查。
• 无效的返回值处理：异步函数中的return children没有实际作用，因为组件已经完成了当前渲染周期的返回，无法改变渲染结果，反而会导致逻辑混乱。

解决方案 #

重构<PrivateRoute>组件，使用useEffect管理异步认证逻辑，同时添加状态控制加载过程，避免无限循环：

import { useContext, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../contexts/authContext';

export default function PrivateRoute({ children }) {
    const { accessToken, loading, refreshUser, verifyToken } = useContext(AuthContext);
    const navigate = useNavigate();
    const [authChecking, setAuthChecking] = useState(false);

    useEffect(() => {
        const checkAuth = async () => {
            setAuthChecking(true);
            try {
                if (!accessToken) {
                    // 无token时尝试刷新
                    const isRefreshed = await refreshUser();
                    if (!isRefreshed) {
                        navigate('/');
                        return;
                    }
                } else {
                    // 有token时验证有效性
                    const isValidToken = await verifyToken();
                    if (!isValidToken) {
                        // 验证失败，尝试刷新
                        const isRefreshed = await refreshUser();
                        if (!isRefreshed) {
                            navigate('/');
                            return;
                        }
                    }
                }
            } catch (error) {
                console.error('认证流程出错:', error);
                navigate('/');
            } finally {
                setAuthChecking(false);
            }
        };

        // 仅在初始加载或依赖变化时执行认证检查
        if (!loading && !authChecking) {
            checkAuth();
        }
    }, [accessToken, loading, refreshUser, verifyToken, navigate, authChecking]);

    // 加载状态：可替换为自定义加载组件
    if (loading || authChecking) {
        return <div>加载中...</div>;
    }

    // 确保认证通过后才渲染子组件
    return accessToken ? children : null;
}

关键改动说明 #

• 用useEffect控制异步逻辑：将认证逻辑放在副作用钩子中，依赖数组中的值变化时才重新执行，避免每次渲染都触发。
• 添加authChecking状态：标记当前是否在进行认证操作，防止同一时间多次触发认证流程。
• 统一错误处理：捕获异步操作中的异常，确保出错时能跳转到登录页。
• 明确加载状态：在认证过程中返回加载组件，避免提前渲染子组件，同时防止状态更新导致的重复渲染。
• 条件渲染子组件：仅当accessToken存在且认证完成后，才渲染子组件，避免无效状态下的渲染。

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