VueJS：存储在localStorage的Auth Token在iPhone上出现部分401错误？

这种桌面端正常、iPhone上部分请求莫名返回401的情况，我碰到过好多次，基本都和Safari（iPhone默认浏览器）的特殊行为脱不了干系。下面是几个最常见的原因和对应的排查、解决思路：

1. Safari隐私模式下的localStorage限制 #

Safari的隐私模式会严格限制本地存储的使用：写入localStorage会抛出QuotaExceededError，而且即使你成功写入了，在页面刷新、后台切换等场景下，数据也可能被意外清空。如果用户是在隐私模式下使用你的应用，就会出现部分请求能拿到Token，部分拿不到的随机401情况。

排查与解决： #

• 先检测用户是否处于隐私模式，用一段简单的代码就能判断：

  function isSafariPrivateMode() {
    try {
      window.localStorage.setItem('__test_private_flag', '1');
      window.localStorage.removeItem('__test_private_flag');
      return false;
    } catch (e) {
      return true;
    }
  }
  

• 如果检测到隐私模式，可以提示用户切换到普通模式；或者改用sessionStorage（相对更稳定，但关闭页面就会丢失），甚至改用Cookie存储Token——Safari对Cookie的隐私限制相对宽松，同域下可靠性更高。

2. 并发请求导致Token未被正确读取 #

当多个请求同时发起时，iOS上的Safari可能会出现localStorage读取延迟的问题：比如登录后刚把Token存入localStorage，紧接着发起的几个请求中，有部分请求还没读到最新的Token，就直接发送了无授权的请求，导致401。

排查与解决： #

• 把Token同时存在内存中一份（比如全局变量或状态管理工具里），后续请求优先从内存读取，避免每次都依赖localStorage：

  // 登录成功后同时存入内存和localStorage
  let authToken = null;
  function handleLoginSuccess(token) {
    authToken = token;
    window.localStorage.setItem('authToken', token);
  }
  
  // 请求时优先用内存中的Token
  function getAuthHeaders() {
    const token = authToken || window.localStorage.getItem('authToken');
    return token ? { Authorization: `Bearer ${token}` } : {};
  }
  

• 对初始化阶段的请求做排队处理，确保Token就绪后再发送：

  const tokenReadyPromise = new Promise((resolve) => {
    const savedToken = window.localStorage.getItem('authToken');
    if (savedToken) {
      authToken = savedToken;
      resolve();
    } else {
      // 监听登录完成事件，登录后resolve
      document.addEventListener('login-success', () => resolve());
    }
  });
  
  // 所有需要授权的请求先等待Token就绪
  async function fetchWithAuth(url, options = {}) {
    await tokenReadyPromise;
    return fetch(url, {
      ...options,
      headers: { ...options.headers, ...getAuthHeaders() }
    });
  }
  

3. Safari的GET请求缓存问题 #

Safari默认会缓存GET请求，哪怕你在请求头里加了Token，缓存的请求也不会重新携带最新的Token。如果你的应用中有重复的GET请求，就会出现第一次请求带Token成功，后续缓存的请求不带Token导致401的情况。

排查与解决： #

• 在所有需要授权的GET请求中添加缓存控制头：

  fetch(url, {
    method: 'GET',
    headers: {
      ...getAuthHeaders(),
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      Pragma: 'no-cache',
      Expires: '0'
    }
  });
  

• 或者给GET请求的URL添加随机参数（比如时间戳），强制浏览器不缓存：

  const urlWithCacheBust = `${url}?cache_bust=${Date.now()}`;
  fetch(urlWithCacheBust, { headers: getAuthHeaders() });
  

4. iOS后台休眠导致localStorage数据丢失 #

当iPhone上的Safari被放到后台一段时间后，系统可能会清理页面内存，导致localStorage中的Token被清空。用户再次打开页面时，部分请求会因为Token丢失而返回401。

排查与解决： #

• 监听页面的visibilitychange事件，当页面从后台回到前台时，重新检查Token状态：

  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {
      const savedToken = window.localStorage.getItem('authToken');
      if (!savedToken && authToken) {
        // 内存中的Token还在，但localStorage丢了，重新存入
        window.localStorage.setItem('authToken', authToken);
      } else if (!savedToken && !authToken) {
        // Token完全丢失，引导用户重新登录
        window.location.href = '/login';
      }
    }
  });
  

• 改用Cookie存储Token，设置合适的过期时间，并且标记HttpOnly（不需要前端读取时）和Secure（HTTPS环境下），Cookie的持久性会比localStorage更好。

你可以先从检测隐私模式和并发请求这两点入手排查，这两个是最常见的原因。如果还没解决，再检查缓存和后台休眠的问题。

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