React项目页面重载跳转登录页但URL不变的问题求解

问题根源 #

页面刷新时，React应用重新初始化，AutorizationContext中的authorized状态会重置为初始值（通常为false或undefined），而登录状态的异步校验逻辑（如读取本地存储的token）尚未完成，导致ProtectedRoute直接触发跳转。

最优解决方案 #

通过在授权上下文添加加载状态，避免在登录状态校验完成前执行跳转逻辑，同时确保状态校验的异步流程正确。

1. 更新授权上下文（AutorizationContext） #

添加loading状态，组件挂载时异步校验登录状态：

import { createContext, useEffect, useState } from 'react';

export const AutorizationContext = createContext();

export const AuthorizationProvider = ({ children }) => {
  const [authorized, setAuthorized] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 异步校验登录状态：实际项目可替换为后端token验证接口
    const checkAuth = async () => {
      const savedToken = localStorage.getItem('authToken');
      // 简单判断token是否存在，实际需结合后端验证逻辑
      const isAuthorized = !!savedToken;
      
      setAuthorized(isAuthorized);
      setLoading(false);
    };

    checkAuth();
  }, []);

  return (
    <AutorizationContext.Provider value={{ authorized, loading }}>
      {children}
    </AutorizationContext.Provider>
  );
};

2. 修改ProtectedRoute组件 #

在加载状态下渲染占位组件（如加载动画），避免提前跳转：

import { Navigate } from 'react-router-dom';
import PropTypes from 'prop-types';
import { useContext } from 'react';
import { AutorizationContext } from './AutorizationContext';

function ProtectedRoute({ children }) {
  const { authorized, loading } = useContext(AutorizationContext);

  // 加载中显示占位组件，可替换为项目中的Spinner
  if (loading) {
    return <div>加载中...</div>;
  }

  return authorized ? children : <Navigate to={RouteConstant.sign} />;
}

ProtectedRoute.propTypes = {
  children: PropTypes.element.isRequired
};

export default ProtectedRoute;

3. 登录成功后的状态同步 #

登录接口调用成功后，将token存入本地存储并更新授权状态：

const handleLogin = async () => {
  // 模拟登录请求，用户名/密码为'test'
  const res = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'test', password: 'test' })
  });
  const data = await res.json();

  if (data.success) {
    localStorage.setItem('authToken', data.token);
    // 更新上下文授权状态
    setAuthorized(true);
    // 跳转至落地页
    navigate(RouteConstant.companyPage);
  }
};

方案说明 #

• 页面刷新时，先执行异步登录状态校验，在loading为true期间不做路由跳转，避免初始状态导致的错误跳转
• 通过本地存储持久化登录标识，确保刷新后能恢复登录状态
• 异步校验逻辑可根据实际项目需求扩展（如调用后端接口验证token有效性）

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