使用NuxtAuth Local Provider无法获取Cookie的技术求助

核心问题诊断 #

你当前的登录流程仅返回JWT token，但未在服务器端主动设置Cookie；同时Nuxt Auth的Cookie配置存在参数错误，导致浏览器无法保存认证Cookie。

分步修复方案 #

1. 修正nuxt.config.ts中的Cookie配置 #

调整auth.provider.token中的Cookie相关参数，适配本地开发环境：

auth: {
  // ...其他配置
  provider: {
    type: 'local',
    // ...endpoints配置
    token: {
      signInResponseTokenPointer: '/token',
      type: 'Bearer',
      cookieName: 'auth.token',
      headerName: 'Authorization',
      maxAgeInSeconds: 60 * 60 * 24 * 7,
      sameSiteAttribute: 'lax', // 替换为lax，SameSite=None需配合secure=true（本地http环境不适用）
      cookieDomain: 'localhost', // 去掉端口号，Cookie域名仅需主机名
      secureCookieAttribute: false, // 本地http环境设为false，生产https环境改为true
      httpOnlyCookieAttribute: true, // 建议开启，提升安全性防止XSS攻击
    }
  }
}

2. 在登录接口中手动设置Cookie #

Nuxt Auth Local Provider不会自动帮你设置Cookie，需在服务器端的login.post.ts中主动添加Cookie响应头：

import { setCookie } from 'h3'; // 引入h3的setCookie方法

export default defineEventHandler(async (event) => {
  // ...原有验证逻辑（邮箱、密码校验）

  const token = signJwt({
    id: user.id,
    email: user.email,
    name: user.username,
  });

  // 关键：设置认证Cookie
  setCookie(event, 'auth.token', token, {
    maxAge: 60 * 60 * 24 * 7,
    path: '/', // Cookie作用域覆盖全站
    domain: 'localhost',
    secure: false,
    httpOnly: true,
    sameSite: 'lax'
  });

  return { token };
});

3. 调整Session接口从Cookie获取Token #

修改session.get.ts，改为从Cookie中读取token（而非Authorization Header），实现页面刷新后的自动认证：

import { verifyJwt } from '~/server/utils/jwt';
import { getCookie } from 'h3'; // 替换getHeader为getCookie

export default defineEventHandler(async (event) => {
  const token = getCookie(event, 'auth.token'); // 从Cookie获取token

  if (!token) {
    return null;
  }

  const user = verifyJwt(token);

  if (!user) return null;

  return { user }; 
});

4. 验证Cookie是否生效 #

登录成功后，打开浏览器开发者工具：

• 进入Application -> Cookies -> localhost
• 确认是否存在auth.token条目，且参数与配置一致

内容的提问来源于stack exchange，提问作者clew-bot