React路由登录态重定向实现中登出/登录后仅刷新才跳转如何修复

问题根因 #

你当前的isLoggedIn是路由组件首次渲染时一次性从localStorage读取的静态常量，后续登录、登出操作修改了localStorage的token值后，这个常量不会自动更新，路由的重定向判断逻辑也不会重新触发，必须手动刷新页面让组件重新渲染、重新读取token才能生效。

修复方案 #

1. 改造路由层，让登录状态变为响应式 #

把登录状态存在组件state中，同时监听登录状态变更的自定义事件，主动更新状态：

import { useState, useEffect } from 'react';
import { BrowserRouter, Route, Redirect } from 'react-router-dom';

const App = () => {
  // 用state存储登录状态，变为响应式数据
  const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem("token"));

  // 监听登录状态变更事件，更新state
  useEffect(() => {
    const updateAuthStatus = () => {
      setIsLoggedIn(!!localStorage.getItem("token"));
    };
    window.addEventListener('authStatusChange', updateAuthStatus);
    // 组件卸载时清除监听
    return () => window.removeEventListener('authStatusChange', updateAuthStatus);
  }, []);

  return (
    <BrowserRouter>
      <Route path={'/'} component={Home} exact />
      <Route 
        path={'/sign-in'} 
        exact 
        render={() => isLoggedIn ? <Redirect to="/" /> : <SignIn />} 
      />
    </BrowserRouter>
  );
}

2. 修改登录、登出逻辑，操作完成后主动触发状态更新与跳转 #

不需要依赖路由的自动判断，操作完成后直接派发事件通知全局更新登录状态，同时主动跳转目标页面：

登出逻辑修改（React Router v5版本）

import { useHistory } from 'react-router-dom';

const YourComponent = () => {
  const history = useHistory();

  const signOut = async () => {
    localStorage.removeItem('token');
    await axios.post('sign-out', {});
    // 派发事件，通知路由组件更新登录状态
    window.dispatchEvent(new Event('authStatusChange'));
    // 主动跳转到登录页
    history.push('/sign-in');
  }

  // 原来的redirect相关逻辑可以直接删除
  // 其余业务逻辑...
}

登录逻辑修改

登录成功后按照同样逻辑处理即可：

// SignIn 组件内
import { useHistory } from 'react-router-dom';

const SignIn = () => {
  const history = useHistory();

  const handleSignIn = async (formData) => {
    const res = await axios.post('sign-in', formData);
    localStorage.setItem('token', res.data.token);
    // 派发事件更新全局登录状态
    window.dispatchEvent(new Event('authStatusChange'));
    // 主动跳转到首页
    history.push('/');
  }

  // 其余登录页逻辑...
}

适配React Router v6的注意点 #

如果你使用的是v6版本的React Router，只需做两处替换即可，逻辑不变：

• 把useHistory替换为useNavigate，跳转写法从history.push(path)改为navigate(path)
• 把路由里的Redirect组件替换为Navigate组件，写法为<Navigate to="/" replace />

如果项目复杂度较高，也可以用React Context全局管理登录状态，替代自定义事件的方案，维护性更好。

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