如何为Nuxt Auth设置动态Cookie域名以适配多域名场景？

针对无法预知访问域名的场景，你可以通过客户端动态获取当前域名并调整Nuxt Auth的Cookie配置，实现不同域名下的登录状态正常工作。以下是具体实现步骤：

1. 基础配置调整 #

先修改nuxt.config.js中的Auth配置，移除固定的domain值，留空或设为null：

// nuxt.config.js
auth: {
  plugins: [ '~/plugins/auth' ],
  localStorage: false,
  cookie: {
    options: {
      domain: null, // 不设置固定域名
      expires: 7,
      secure: process.env.NODE_ENV === 'production', // 生产环境启用HTTPS Cookie
      sameSite: 'lax'
    },
  },
}

2. 插件中动态配置Cookie域名 #

在~/plugins/auth.js中，利用客户端环境的window.location.hostname获取当前访问域名，根据域名结构动态设置Cookie的domain属性：

// ~/plugins/auth.js
import Cookies from 'js-cookie'

export default function ({ $auth }) {
  if (process.client) {
    const hostname = window.location.hostname
    let cookieDomain = hostname

    // 处理非localhost的域名，适配子域名场景
    if (hostname.includes('.') && hostname !== 'localhost') {
      const domainParts = hostname.split('.')
      // 适配co.uk、com.cn这类二级顶级域，取最后两段作为根域
      cookieDomain = domainParts.length > 2 
        ? `.${domainParts.slice(-2).join('.')}` 
        : `.${hostname}`
    }

    // 更新Nuxt Auth的Cookie全局配置
    $auth.$storage.options.cookie.domain = cookieDomain

    // 登录成功后同步更新已有Cookie的域名（可选，防止配置生效不及时）
    $auth.on('login', () => {
      const cookiePrefix = $auth.options.cookie.prefix
      const strategyName = $auth.strategy.name
      const tokenCookieName = `${cookiePrefix}_token_${strategyName}`
      
      const tokenValue = Cookies.get(tokenCookieName)
      if (tokenValue) {
        Cookies.set(tokenCookieName, tokenValue, {
          domain: cookieDomain,
          expires: $auth.options.cookie.options.expires,
          path: '/',
          secure: $auth.options.cookie.options.secure,
          sameSite: $auth.options.cookie.options.sameSite
        })
      }
    })
  }
}

关键注意事项 #

• localhost兼容：本地开发时localhost不能设置带点的域名，否则Cookie会失效，代码中已做排除处理。
• 顶级域适配：如果你的业务包含co.uk、com.cn这类二级顶级域，可能需要根据实际情况调整域名分割逻辑，确保根域识别正确。
• HTTPS要求：生产环境下必须启用secure: true，否则Cookie无法在HTTPS环境下正常传输。

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