React登录成功后跳转首页瞬间返回登录页问题求助

问题根因 #

1. 你当前的登录状态isLoggedIn仅在App组件挂载时（componentDidMount生命周期）读取一次本地存储，登录操作是App挂载完成后触发的，登录成功后App的isLoggedIn状态没有同步更新，仍然为false。
2. 登录成功后你先调用this.props.history.push("/home")跳转到首页，此时PrivateRoute拿到的authed参数还是旧的false值，会直接重定向回登录页，就出现了首页一闪而过的现象。
3. 后续执行的window.location.reload()会刷新当前页面，此时已经被重定向回登录页，刷新后App重新挂载才会读取到本地存储的用户信息更新isLoggedIn为true，所以手动导航可以进入首页。

修复方案 #

第一步：删除冗余的页面刷新代码 #

修改Login.js中登录成功的回调逻辑，删掉不必要的window.location.reload()，刷新页面会丢失当前React应用的所有状态，完全不需要：

AuthService.login(this.state.username, this.state.password).then(
  () => {
    this.props.history.push("/home");
    // 移除下面这行代码
    // window.location.reload();
  },
  error => {
    // 原有错误处理逻辑保持不变
    const resMessage =
      (error.response &&
        error.response.data &&
        error.response.data.message) ||
      error.message ||
      error.toString();

    this.setState({
      loading: false,
      message: resMessage
    });
  }
);

第二步：优化私有路由的登录判断逻辑 #

修改PrivateRoute.js，不再依赖App组件传递的authed参数，每次判断权限时直接读取本地存储的最新用户信息，避免状态不同步的问题：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import AuthService from './services/authService';

const PrivateRoute = ({ path, component}) => {
    // 直接读取最新的登录状态，不依赖上层传递的参数
    const isAuthed = !!AuthService.getCurrentUser();
    return (
        isAuthed
        ? <Route path={path} component={component} />
        : <Redirect to='/login' />
    )
}

export default PrivateRoute;

（可选优化）如果后续需要全局共享用户信息，建议使用React Context或者Redux等状态管理方案统一管理登录状态，登录成功后更新全局状态即可同步所有组件的登录判断。

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