Firebase托管的Vue主应用与子域Nuxt应用能否客户端无刷新连接并保持登录状态？

一、无需页面刷新的跨应用连接：无法直接实现 #

不同子域的独立前端应用（example.com 和 sub.example.com）受浏览器同源策略限制，各自的JavaScript运行在完全隔离的执行上下文中，无法直接操控对方的路由状态或DOM。因此，完全无刷新的跨域跳转是做不到的。

如果想要接近无刷新的体验，可以考虑以下过渡方案：

• 逐步迁移公共页面：把主应用中被跳转的页面（比如FAQ）先迁移到Nuxt应用中，这样跳转就变成同域内的SSR路由跳转，自然实现无刷新；
• 路由拦截+内容预加载：在主应用中对子域链接添加拦截，通过Fetch API预加载目标页面的HTML内容后替换当前页面DOM，但这种方式需要两个应用配合维护，复杂度高，不如逐步迁移划算。

二、跨应用保持登录状态：完全可行 #

两个应用基于同一个Firebase项目，Firebase Auth支持跨子域共享登录会话，只需完成以下配置：

1. 配置Firebase授权域 #

登录Firebase控制台，进入Authentication > 设置 > 授权域，将 example.com 和 sub.example.com 都添加到授权域列表中，确保Firebase Auth允许这两个域名的应用使用认证服务。

2. 统一Auth的Cookie域名 #

在两个应用的Firebase Auth初始化代码中，设置cookieDomain为顶级域名 .example.com（注意前缀的点），这样Auth的会话Cookie会被绑定到顶级域，所有子域都能读取到。

主应用（Vue2）示例代码：

import firebase from 'firebase/app'
import 'firebase/auth'

const firebaseConfig = { /* 你的Firebase项目配置 */ }
firebase.initializeApp(firebaseConfig)

const auth = firebase.auth()
// 设置持久化存储为本地Cookie
auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL)
// 配置Cookie域名
auth.settings.cookieDomain = '.example.com'

子应用（Nuxt3）示例代码（客户端插件）：

// plugins/firebase.client.ts
import { initializeApp } from 'firebase/app'
import { getAuth, setPersistence, browserLocalPersistence } from 'firebase/auth'

export default defineNuxtPlugin(() => {
  const firebaseConfig = { /* 你的Firebase项目配置 */ }
  const app = initializeApp(firebaseConfig)
  const auth = getAuth(app)
  
  // 设置持久化存储为本地Cookie
  setPersistence(auth, browserLocalPersistence)
  // 配置Cookie域名
  auth.settings.cookieDomain = '.example.com'
  
  return {
    provide: {
      auth
    }
  }
})

3. 验证共享状态 #

完成配置后，在主应用登录后跳转至子应用，调用auth.currentUser即可获取到当前登录用户；同理子应用登录后主应用也能读取到会话。注意：必须确保两个应用使用完全相同的Firebase项目配置，且页面为HTTPS（Firebase托管默认满足）。

过渡阶段建议 #

考虑到未来要完全迁移到Nuxt+Vue3，优先推荐逐步将主应用的页面迁移到Nuxt子应用中，既解决跨域跳转的刷新问题，又能逐步统一技术栈，减少长期维护成本。

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