Nuxt3迁移：如何在setup脚本中实现前端设置Cookie

你之前用useCookie的写法不对，Nuxt3的useCookie不是直接传三个参数，它的正确用法是先创建一个响应式Cookie引用，再给这个引用赋值。另外也可以用原生JS直接设置Cookie，两种方案都给你整理好了：

方案一：使用 Nuxt3 内置的 useCookie #

useCookie 会返回一个响应式的 ref 对象，你需要通过修改它的 value 属性来设置 Cookie，配置选项作为第二个参数传入：

const bearerCookie = useCookie('Bearer', { 
  maxAge: 60 * 60 * 24 * 7, // 7天有效期
  path: '/', // 确保全站可访问
  sameSite: 'Lax' // 提升安全性
})

$fetch(`${runtimeConfig.public.BASE_API_BROWSER_URL}/user/login`, {
  method: 'POST',
  body: {
    email: email.value,
    password: password.value,
  }
})
.then((resp) => {
  localStorage.setItem('Bearer', resp.access_token)
  // 设置Cookie
  bearerCookie.value = resp.access_token
  // 注意：确认接口返回的token字段是resp.access_token还是resp.data.access_token，根据实际调整
  isSubmitting.value = false
  window.location.href = '/profile/'
})

方案二：原生 JavaScript 设置 Cookie（不依赖任何库） #

直接操作 document.cookie，需要按规范拼接Cookie字符串，注意编码和必要属性：

$fetch(`${runtimeConfig.public.BASE_API_BROWSER_URL}/user/login`, {
  method: 'POST',
  body: {
    email: email.value,
    password: password.value,
  }
})
.then((resp) => {
  localStorage.setItem('Bearer', resp.access_token)
  // 原生设置Cookie
  const token = encodeURIComponent(resp.access_token) // 处理特殊字符
  const maxAge = 60 * 60 * 24 * 7
  document.cookie = `Bearer=${token}; max-age=${maxAge}; path=/; SameSite=Lax`
  // 若需要设置第二个Cookie，重复上述格式即可
  // document.cookie = `AnotherCookie=${anotherValue}; max-age=${maxAge}; path=/; SameSite=Lax`
  
  isSubmitting.value = false
  window.location.href = '/profile/'
})

注意事项 #

• 确认接口返回的token字段结构：你代码里同时出现了resp.access_token和resp.data.access_token，要根据实际接口返回调整，避免取错值导致Cookie设置为空。
• useCookie 支持服务端和客户端使用，如果你在页面组件的setup里调用，Nuxt会自动处理环境适配；如果是在纯客户端逻辑里（比如点击事件），两种方案都能正常工作。

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