在Nuxt中实现Firebase __session Cookie跨子域共享与读取问题

核心问题1：Cookie未配置跨子域共享的domain属性 #

你当前设置Cookie时未指定domain参数，js-cookie默认会将Cookie绑定到当前子域elearning.igeddit.ca，导致technical.igeddit.ca无法读取。跨子域共享Cookie必须将domain设置为父域.igeddit.ca（注意开头的点）。

修正Cookie设置代码 #

修改elearning子域中设置Cookie的逻辑，补充domain、path参数，同时修正getIdToken()的异步调用问题：

async onAuthStateChangedAction(vuexContext, authUser) {
    if (!authUser) {
        console.log("removing session cookie")
        Cookies.remove('__session', { domain: '.igeddit.ca', path: '/' })
    } else {
        console.log("adding session cookie")
        // getIdToken是异步方法，必须加await获取实际token
        let idToken = await authUser.getIdToken();
        console.log("idToken: ", idToken);
        Cookies.set('__session', idToken, { 
            expires: 0.04166667,
            domain: '.igeddit.ca',
            path: '/',
            // 生产环境建议开启secure，确保仅HTTPS传输Cookie
            secure: process.env.NODE_ENV === 'production'
        })
    }
},

核心问题2：服务器端读取Cookie的方式错误 #

nuxtServerInit运行在服务器端，而js-cookie默认仅支持浏览器客户端读取Cookie。服务器端需要通过req.headers.cookie获取请求携带的Cookie，再手动解析。

修正服务器端读取逻辑 #

方案1：使用cookie-parser包解析（推荐）

1. 安装依赖：

npm install cookie-parser

2. 在nuxt.config.js中配置中间件：

export default {
  serverMiddleware: [
    'cookie-parser'
  ]
}

3. 修改nuxtServerInit：

nuxtServerInit({ req }) {
    console.log("nuxt init...")
    // 解析后的Cookie会挂载在req.cookies上
    const sessionCookie = req.cookies?.__session
    console.log("sessionCookie: ", sessionCookie);

    if (!sessionCookie) {
        console.log("no cookie found...")
    } else {
        console.log("there's a session cookie...")
    }
},

方案2：手动解析req.headers.cookie（无需额外依赖）

nuxtServerInit({ req }) {
    console.log("nuxt init...")
    let sessionCookie = null
    if (req.headers.cookie) {
        const cookieMap = req.headers.cookie.split(';').reduce((acc, cookie) => {
            const [key, value] = cookie.trim().split('=')
            acc[key] = decodeURIComponent(value)
            return acc
        }, {})
        sessionCookie = cookieMap.__session
    }
    console.log("sessionCookie: ", sessionCookie);

    if (!sessionCookie) {
        console.log("no cookie found...")
    } else {
        console.log("there's a session cookie...")
    }
},

验证步骤 #

1. 在浏览器开发者工具的Application > Cookies > elearning.igeddit.ca中，检查__sessionCookie的Domain是否为.igeddit.ca，Path是否为/。
2. 访问technical.igeddit.ca时，查看Network面板中请求的Cookie请求头是否包含__session。
3. 查看服务器端日志，确认req.headers.cookie中存在__session字段。

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