React中localStorage存储token刷新后为undefined问题排查

云原生阿岚

2026-8-29

问题根因

代码存在两个核心逻辑缺陷，导致存储的token被异常覆盖：

刷新页面后Redux内存状态会完全重置，state.user.currentUser.token初始值为undefined。监听user的写入useEffect会在组件首次挂载时立刻触发，直接把undefined写入localStorage，覆盖掉之前存储的有效token。
读取localStorage的逻辑拿到token后，仅更新了本地isLoggedIn状态，没有将token回填到Redux store。后续Redux中的user始终保持初始undefined值，既会持续触发无效写入，路由配置中依赖的user变量也无法获取有效登录态。
额外声明的isLoggedIn属于冗余状态，和Redux存储的登录态重复，很容易引发数据不一致问题。

修复方案

写入localStorage前增加值校验：有效token才执行写入，登录态为空时直接清除存储，避免无效值覆盖
初始化读取到本地存储的token后，直接同步到Redux store，移除冗余的本地isLoggedIn状态
路由判断直接使用Redux同步后的有效token值即可

修复后的核心代码参考（App.tsx）：

// 移除冗余的本地isLoggedIn状态
// @ts-ignore
const user = useAppSelector(state => state.user.currentUser.token);
// 引入项目中已封装的dispatch方法
const dispatch = useAppDispatch();

useEffect(() => {
  const storedToken = localStorage.getItem("token");
  if (storedToken) {
    // 将读取到的token回填到Redux，setCurrentUser替换为项目中实际的更新用户信息action
    dispatch(setCurrentUser({ token: storedToken }));
  }
}, []);

useEffect(() => {
  if (user) {
    localStorage.setItem("token", user);
  } else {
    // 登录态为空时清除本地存储，避免残留旧token
    localStorage.removeItem("token");
  }
}, [user]);