React渲染未等待Redux状态更新导致登录后跳回登录页问题

问题根因 #

• 登录跳转时机错误：login_action是异步请求，你在dispatch后未等待登录请求完成、后端成功写入httpOnly cookie就直接跳转到首页，导致首页发起JWT校验请求时，浏览器还没有拿到有效Cookie，直接返回未登录状态。
• Reducer状态定义不规范：初始状态没有明确声明字段，请求中更新状态时未合并旧状态，导致cookie、loading字段在请求过程中丢失，渲染判断逻辑失效。
• 首页渲染逻辑缺陷：首次渲染时未对请求中的状态做兜底判断，导致还没拿到校验结果就提前触发重定向。

修复步骤 #

1. 修改登录页提交逻辑，等待登录请求完成后再跳转 #

将提交函数改为异步函数，等待login_action执行完成、后端成功写入Cookie后再执行跳转：

const handleFormSubmit = async (e) => {
  e.preventDefault();
  await dispatch(login_action(loginFormData));
  history.push("/");
};

注意要确保你的login_action是符合Redux Thunk规范的异步函数，会在登录请求完成后再resolve

2. 修正get_cookie_reducer的状态定义 #

明确初始状态的默认字段，每次更新状态时合并旧状态，避免字段丢失：

// 明确初始状态的默认字段
const initialState = {
  loading: false,
  cookie: undefined
}
export const get_cookie_reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'GET_COOKIE_REQUEST' :
      // 合并旧状态，避免字段丢失
      return {
        ...state,
        loading : true
      }
    case 'GET_COOKIE_LOGGED_IN' :
      return {
        ...state,
        loading : false,
        cookie : action.payload
      }
    case 'GET_COOKIE_LOGGED_OUT' :
      return {
        ...state,
        loading : false,
        cookie : action.payload
      }
    default : 
      return state;
  }
};

3. 优化首页渲染判断逻辑 #

调整判断顺序，未拿到校验结果前统一显示loading，避免提前触发重定向：

return (
  <>
    {/* 未加载完成/未拿到校验结果时，统一显示loading */}
    {loading || cookie === undefined ? (
      <h1>loading...loading...loading...</h1>
    ) : (
      cookie ? <h1> You are logged in ! </h1> : <Redirect to="login"/>
    )}
  </>
);

可选优化 #

你可以把这套鉴权逻辑抽成公共的路由守卫组件，包裹所有需要登录才能访问的页面，避免每个页面重复写校验逻辑。

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