React TypeScript+Django JWT项目刷新页面自动登出如何解决？

问题根因 #

Redux 存储的状态是内存级别的，页面刷新后所有内存数据都会被清空，你虽然已经将token存入localStorage持久化存储，但没有在应用初始化时将localStorage中的token同步回Redux状态，导致刷新后Redux的登录状态回到了初始的未登录状态。

具体修复步骤 #

1. 调整reducer初始状态，初始化时读取localStorage的登录信息 #

修改你的auth reducer的初始状态定义逻辑，增加从localStorage读取数据的逻辑：

import { AuthState, AuthTypes } from "./types";

// 初始化时从localStorage读取持久化的登录状态
const getInitialState = (): AuthState => {
  const savedUserInfo = localStorage.getItem("user-info");
  if (savedUserInfo) {
    try {
      const userInfo = JSON.parse(savedUserInfo);
      // 存在有效token就初始化登录状态
      if (userInfo?.token) {
        return {
          token: userInfo.token,
          isSignIn: true
        };
      }
    } catch (err) {
      // 存储内容异常时清空无效数据
      localStorage.removeItem("user-info");
    }
  }
  // 没有有效登录信息返回默认未登录状态
  return {
    token: '',
    isSignIn: false,
  };
};

const initialState: AuthState = getInitialState();

2. 修正现有代码的拼写/类型匹配错误 #

你现有代码存在多处命名不统一的问题，会导致状态更新失效：

• 你导出的登录action函数名为大写开头的LogInAction，但登录组件中调用的是小写开头的logInAction，需要统一命名
• reducer中登录逻辑的case写的是ActionTypes.signIn，但你在authTypes.ts中定义的登录类型是AuthTypes.logIn，对应常量为SIGN_IN，需要修改reducer的case为case AuthTypes.logIn:
• 登出action中使用的ActionTypes.logOut需要统一为AuthTypes.logOut

3. 补充登出时清空localStorage的逻辑 #

你当前的登出逻辑只修改了Redux状态，没有同步清空localStorage的持久化数据，需要在登出逻辑中增加清空逻辑，例如在reducer的登出case中处理：

case AuthTypes.logOut:
  // 登出时清空持久化存储的登录信息
  localStorage.removeItem("user-info");
  return {
    token: '',
    isSignIn: false
  };

可选优化 #

可以在应用根组件的useEffect钩子中增加token有效性校验逻辑，调用后端JWT校验接口，如果token已过期则自动触发登出逻辑，避免使用过期token请求接口报错。

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