Nuxtjs-auth容器化后登录成功但不获取用户、loggedIn为false问题

问题根源 #

本地同域名不同端口（3000/8000）运行时，Cookie默认在同域名下共享；但跨子域名（app.test和api.app.test）部署后，Cookie的Domain属性未正确配置，导致Nuxt Auth无法识别已登录状态，进而出现自动获取用户失败、loggedIn始终为false的问题。

解决方案 #

1. 后端调整Cookie与CORS配置

后端返回登录Token的Cookie时，必须将Domain设置为.app.test（注意前缀的点），确保两个子域名都能读取该Cookie；同时配置CORS允许带凭证请求：

• CORS核心配置：
  • Access-Control-Allow-Origin 设为 http://app.test（不能用通配符*，否则无法携带凭证）
  • Access-Control-Allow-Credentials 设为 true
• Cookie配置示例（以Express为例）：

res.cookie('auth_token', token, {
  domain: '.app.test',
  httpOnly: true, // 若前端无需直接读取Token可开启，否则设为false
  secure: process.env.NODE_ENV === 'production', // 生产环境开启HTTPS时设为true
  sameSite: 'lax' // 避免跨域请求被拦截
});

2. Nuxt Auth模块配置修正

在nuxt.config.js的auth配置中，同步Cookie的Domain设置，并验证关键参数：

export default {
  auth: {
    strategies: {
      local: {
        token: {
          property: 'access_token', // 对应后端返回的Token字段名
          global: true,
          type: 'Bearer'
        },
        user: {
          property: 'user', // 对应后端返回的用户数据字段名
          autoFetch: true // 确保已开启自动获取用户
        },
        endpoints: {
          login: { url: '/api/auth/login', method: 'post' },
          user: { url: '/api/auth/user', method: 'get' },
          logout: { url: '/api/auth/logout', method: 'post' }
        }
      }
    },
    cookie: {
      domain: '.app.test' // 与后端Cookie的Domain保持一致
    },
    redirect: {
      login: '/login',
      logout: '/',
      home: '/dashboard'
    }
  }
}

3. 验证与调试

• 登录成功后，打开浏览器开发者工具→Application→Cookies，检查Token对应的Cookie的Domain是否为.app.test
• 手动调用$auth.fetchUser()后，查看Vuex的auth.user是否有数据，同时确认$auth.loggedIn状态是否变为true
• 若仍有问题，检查后端用户接口是否正确返回数据，以及请求头是否携带了正确的Bearer Token

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