在Safari调试Vue应用时Firebase Auth变更处理器未触发

核心问题排查 #

1. 路由守卫逻辑冲突
   当前路由守卫里，检测到未授权用户时执行router.push({name: 'login'})后仍调用next()，这会造成路由队列冲突。在Safari开发环境的事件处理机制下，这种冲突会直接阻止onAuthStateChanged的跳转逻辑生效。

2. onAuthStateChanged冗余代码与跳转逻辑漏洞
   代码里重复赋值user.value = newUser，虽不影响功能但属于冗余代码；同时登录后的跳转没有处理用户原本的访问目标，且未登录时的跳转没有判断当前页面，容易引发重复跳转。

3. Safari开发环境Auth状态同步延迟
   Safari开发环境的隐私策略会限制跨域状态同步，即便用了inMemoryPersistence，跳转后的Auth状态也可能无法被onAuthStateChanged及时捕获。

具体修复步骤 #

1. 修正路由守卫逻辑 #

router.beforeEach(async (to, from, next) => {
  NProgress.start()
  document.title = to.meta.title as string
  if (to.meta.requiresAuth) {
    const userStore = useAuthStore()
    const user = userStore.user
    if (!user) {
      // 用next跳转替代router.push，避免路由冲突，同时记录用户原本要访问的页面
      next({ name: 'login', query: { redirect: to.fullPath } })
      return // 必须return，阻止后续next()执行
    }
    next()
  } else {
    next()
  }
  NProgress.done() // 统一放在末尾，确保所有分支都能结束进度条
})

2. 清理并优化onAuthStateChanged逻辑 #

onAuthStateChanged(auth, (newUser) => {
  user.value = newUser
  if (newUser) {
    // 优先跳转到用户原本要访问的页面，没有则跳转到content
    const redirect = router.currentRoute.value.query.redirect as string
    router.push({ name: redirect || 'content' })
  } else {
    // 只有当前不在登录页时才跳转，避免重复触发路由跳转
    if (router.currentRoute.value.name !== 'login') {
      router.push({ name: 'login' })
    }
  }
})

3. 优化loginGoogle方法的错误处理 #

async function loginGoogle() {
  nProgress.start()
  if (!user.value) {
    await setPersistence(auth, inMemoryPersistence)
    try {
      await signInWithRedirect(auth, provider)
    } catch (err) {
      console.error('登录失败:', err)
      nProgress.done() // 登录失败也要结束进度条
    }
  } else {
    nProgress.done()
  }
}

4. Safari开发环境临时配置调整 #

• 打开Safari开发者菜单 → 隐私，取消勾选「阻止跨域跟踪」和「阻止所有Cookie」（仅开发环境临时关闭，生产环境保持默认）。
• 确保Auth服务的域名在Safari的信任列表中，避免状态同步被拦截。

验证流程 #

1. 清除Safari开发环境的缓存和Cookie，重启浏览器后测试。
2. 点击需要认证的页面，确认正常跳转到登录页。
3. 完成Google登录后，确认自动跳转到目标页面（内容页或用户原本要访问的页面）。

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