React应用切换Cookie存储后刷新页面自动登出问题

核心问题原因 #

刷新即登出的核心bug是读取Cookie时遗漏了JSON反序列化步骤：

• 写入Cookie时你通过JSON.stringify()把用户认证对象转成了字符串存储，Cookies.get()默认返回的就是这段原始字符串，不是可直接访问属性的JavaScript对象
• 未解析的字符串上访问storedData.token、storedData.expiration得到的都是undefined，登录态校验逻辑会直接判定无有效凭证，不会触发自动登录，表现为刷新后退出
• 之前使用localStorage时功能正常，是因为localStorage版本的代码你大概率写了JSON.parse()解析读取到的字符串，切换Cookie实现时漏掉了这步逻辑。

额外潜在问题 #

你当前存储Cookie时没有配置expires属性，js-cookie默认会创建会话级Cookie，浏览器完全关闭后就会自动清除，和你设置的1小时Token有效期不匹配，会出现Token没过期但Cookie先被清掉的问题。

修复步骤 #

1. 读取Cookie后增加JSON解析逻辑，同时加try/catch捕获异常，避免Cookie数据损坏时页面白屏
2. 写入Cookie时同步配置和Token一致的过期时间，保证Cookie生命周期和认证态对齐

修正后的核心代码 #

首先修改页面初始化读取Cookie的useLayoutEffect逻辑：

useLayoutEffect(() => {
  const storedCookieStr = Cookies.get("userData");
  if (!storedCookieStr) return;

  try {
    const storedData = JSON.parse(storedCookieStr);
    // 校验Token和有效期
    if (storedData?.token && new Date(storedData.expiration) > new Date()) {
      login(
        storedData.userRole,
        storedData.userId,
        storedData.token,
        new Date(storedData.expiration)
      );
    }
  } catch (err) {
    // 数据格式异常时清理无效Cookie
    Cookies.remove("userData");
  }
}, [login]);

再修改login方法里的Cookie写入逻辑，补充过期配置：

Cookies.set(
  "userData",
  JSON.stringify({
    userRole: userRole,
    userId: uid,
    token: token,
    expiration: tokenExpirationDate.toISOString(),
  }),
  // 对齐Token过期时间，js-cookie的expires支持传入Date对象
  { expires: tokenExpirationDate }
);

可选优化：将token、userId的state初始值从false改为null，和登出时设置的值类型保持一致，避免类型判断出现非预期结果。

浏览器中存储的Cookie截图

内容的提问来源于stack exchange，提问作者V.T