nuxt3中useCookie()轻松实现数据存储与安全优化

什么是 Nuxt 3 中的 Cookies

在 Nuxt 3 中，Cookies 可以在服务端和客户端操作。通过 useCookie 组合式函数，Nuxt 提供了一个统一的 API，适用于页面和组件的双端操作

如何设置 Cookies 操作

在 Nuxt 3 中，你无需额外配置或导入即可使用 Cookies。useCookie 是内置的，并且会被自动导入，因此可以直接在组件、页面或组合式函数中使用。

读取 Cookies

要读取 Cookie，只需调用 useCookie：

const token = useCookie('token')  
console.log(token.value) // 输出该 Cookie 的值

写入 Cookies

设置 Cookie 只需要为 useCookie 返回的 ref 赋值：

const token = useCookie('token')  
token.value = 'my-new-token'

你还可以通过选项自定义 Cookie：

const token = useCookie('token', {  
  maxAge: 60 * 60 * 24 * 7, // 1 周  
  path: '/',  
  secure: true,  
  httpOnly: true  
})  
token.value = 'my-secure-token'

常用选项说明

• maxAge：设置 Cookie 的有效期（单位：秒）。例如，60 * 60 * 24 * 7 表示 7 天后过期。
• path：指定 Cookie 的作用路径。例如，'/' 使其适用于全站，'/admin' 则仅适用于 /admin 下的页面。
• secure：为 true 时，Cookie 只能通过 HTTPS 传输，保障敏感数据的安全。
• httpOnly：为 true 时，Cookie 只能由服务端访问，无法通过 JavaScript 操作，从而防止跨站脚本攻击（XSS）。

其他选项：

• domain：指定 Cookie 的有效域名，默认为当前域名。
• sameSite：控制跨站请求时 Cookie 的发送规则：
  • 'strict'：仅在同站请求时发送。
  • 'lax'：导航到源站时会发送，但不适用于跨站请求。
  • 'none'：同站与跨站请求均发送。
• expires：直接指定 Cookie 的到期日期，作为 maxAge 的替代。

示例：

const userPreferences = useCookie('userPrefs', {  
  maxAge: 60 * 60 * 24 * 30, // 30 天  
  path: '/',  
  secure: true,  
  httpOnly: true,  
  domain: 'example.com',  
  sameSite: 'lax'  
})  
userPreferences.value = JSON.stringify({ theme: 'dark', language: 'en' })

删除 Cookies

将 Cookie 的值设置为 null 即可删除：

const token = useCookie('token')  
token.value = null

在服务端处理 Cookies

在 Nuxt 3 的服务端，使用 h3 提供的 getCookie 和 setCookie 方法操作 Cookies。它们是自动导入的，无需额外设置。

示例：

export default defineEventHandler((event) => {  
  // 读取 Cookie  
  const token = getCookie(event, 'token')  
  
  // 设置 Cookie  
  setCookie(event, 'session', 'session-value', {  
    httpOnly: true,  
    secure: true,  
    maxAge: 60 * 60 * 24 * 7 // 1 周  
  })  
  
  return {  
    message: 'Cookie 处理成功'  
  }  
})

常见用例

1. 用户认证

用于存储用户的认证令牌：

const authToken = useCookie('auth-token', {  
  maxAge: 60 * 60 * 24 * 7,  
  secure: true,  
  httpOnly: true  
})  
authToken.value = 'user-auth-token'

2. 主题偏好设置

记录用户的主题选择：

const theme = useCookie('theme', {  
  default: () => 'light',  
  watch: true  
})  

function toggleTheme() {  
  theme.value = theme.value === 'light' ? 'dark' : 'light'  
}

3. 语言设置

存储用户的语言偏好：

const lang = useCookie('lang', {  
  default: () => 'en',  
  maxAge: 60 * 60 * 24 * 30  
})  

function setLanguage(newLang) {  
  lang.value = newLang  
}

4. 购物车

保存购物车数据：

const cart = useCookie('shopping-cart', {  
  default: () => [],  
  watch: true,  
  encode: value => JSON.stringify(value),  
  decode: value => JSON.parse(value)  
})  

function addToCart(item) {  
  cart.value.push(item)  
}

5. 用户同意管理

存储用户对 Cookies 的同意偏好：

const cookieConsent = useCookie('cookie-consent', {  
  default: () => ({ necessary: true, analytics: false, marketing: false }),  
  maxAge: 60 * 60 * 24 * 365,  
  encode: value => JSON.stringify(value),  
  decode: value => JSON.parse(value)  
})  

function updateConsent(category, value) {  
  cookieConsent.value[category] = value  
}

6. 表单自动保存

防止用户填写的表单数据因页面刷新而丢失：

const formData = useCookie('form-autosave', {  
  default: () => ({}),  
  watch: true,  
  maxAge: 60 * 10, // 10 分钟  
  encode: value => JSON.stringify(value),  
  decode: value => JSON.parse(value)  
})  

function autoSaveForm(data) {  
  formData.value = data  
}