Vue Web应用路由跳转时Safari清空localStorage致登出问题求助

• 先确认Safari是否触发了智能跟踪防护（ITP）规则：如果站点存在跨域iframe嵌入、加载了跨域跟踪类脚本，ITP会自动清理非用户直接交互写入的本地存储，路由跳转触发跨域资源加载时大概率会触发该清理逻辑。
• 校验路由跳转的域名一致性：如果项目采用多子域名部署，确认登录页、首页、/user等业务路由属于同一个域名，不同子域名（例如www.demo.com和user.demo.com）的localStorage是完全隔离的，Safari不支持跨子域名的localStorage共享，会表现为跳转后读不到token。
• 排查全局代码的清理逻辑：全局检索项目中所有localStorage.clear()、localStorage.removeItem('token')调用点，重点检查Vue Router全局守卫、第三方鉴权SDK、埋点SDK中的相关逻辑，Safari的JS执行时序和Chrome存在差异，部分异步逻辑里的误清理操作会在路由跳转时提前触发。
• 核对存储写入与跳转的时序：确认登录成功后是不是在token未完成localStorage写入时就触发了路由跳转，Chrome会兜底执行页面跳转前队列中的存储操作，但Safari会直接中断未完成的写入，表现为跳转后token丢失。
• 检查浏览器权限与模式：确认Safari没有给当前站点设置「阻止存储」权限，同时排除无痕浏览模式、添加到主屏幕的PWA独立模式的特殊存储策略影响。

• 调整存储与跳转的执行顺序：拿到登录接口返回的token后，先完成localStorage写入，再执行路由跳转，不要将两个操作放在并行Promise中执行，参考正确写法：

// 错误写法：并行执行可能被Safari中断写入
Promise.all([
  localStorage.setItem('token', res.data.token),
  router.push('/home')
])

// 正确写法：写入完成后再跳转
localStorage.setItem('token', res.data.token)
await router.push('/home')

• 增加双层存储兜底：登录成功后除了写入localStorage，同时将token存在Pinia/Vuex等全局状态中，在路由全局前置守卫中加恢复逻辑，避免误判登录态失效：

router.beforeEach((to, from, next) => {
  let token = localStorage.getItem('token')
  if (!token) {
    // 从全局状态中取暂存的token回写
    token = userStore.token
    if (token) localStorage.setItem('token', token)
  }
  // 原有鉴权逻辑
  next()
})

• 适配ITP规则：如果确认是ITP导致的存储清理，将token存储迁移到第一方Cookie，设置SameSite=Lax、Secure属性，有效期与token有效期保持一致，符合规则的第一方Cookie不会被ITP清理；纯同站场景可以在首次页面交互（点击、滚动）时做一次token存在性校验，缺失就从全局状态补写。
• 跨子域名场景适配：如果业务需要跨子域名共享登录态，不要用localStorage存token，改成写入根域名的Cookie（设置domain=你的根域名），即可在所有子域名下共享读取。
• PWA场景兜底：如果是添加到主屏幕的PWA应用，额外将token备份到IndexedDB，每次页面加载时优先读localStorage，读不到就从IndexedDB恢复，避免Safari不定期清理独立模式存储导致的登录态失效。

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