Cookie中存储JWT Token时如何在Nuxt.js中实现身份认证？

方案适用性 #

这个方案非常适合绝大多数业务场景。相比把JWT存在localStorage的方案，Cookie可配置HttpOnly属性禁止前端JS读取，能从根源上避免XSS攻击窃取Token，搭配Secure、SameSite属性后安全性远高于本地存储方案，除非你有跨多个一级域名共享身份的特殊需求，否则Cookie认证是Nuxt项目的首选方案。

具体实现步骤（以Nuxt 3为例） #

1. 前置Cookie安全配置 #

首先要求后端在写入JWT到Cookie时必须配置以下属性，避免安全风险：

• HttpOnly：禁止前端JS读取Cookie，防止XSS攻击窃取Token
• Secure：仅在HTTPS环境下传输Cookie，避免明文泄露
• SameSite=Lax（或Strict）：规避CSRF攻击风险
• Path=/：保证Cookie全站生效
• 有效期和JWT本身的过期时间保持一致

2. 配置全局身份校验中间件 #

在项目middleware目录下新建auth.global.ts（全局中间件，每次路由跳转都会自动执行）：

export default defineNuxtRouteMiddleware(async (to, from) => {
  // 配置不需要登录即可访问的路由白名单
  const whiteList = ['/login', '/register', '/public']
  if (whiteList.includes(to.path)) {
    return
  }

  // 调用后端身份校验接口验证JWT有效性，服务端渲染时会自动从请求头拿Cookie，客户端请求浏览器会自动携带Cookie
  const { data: isValid, error } = await useFetch('/api/auth/verify', {
    method: 'POST',
    credentials: 'include' // 必须配置，保证请求自动携带Cookie
  })

  if (error.value || !isValid.value) {
    // 校验失败跳转到登录页
    return navigateTo('/login')
  }
})

3. 登录、登出逻辑实现 #

登录逻辑

登录页调用后端登录接口，后端验证账号密码通过后会自动将JWT写入响应头的Cookie，前端不需要手动操作Cookie：

// login.vue 中的登录方法
const handleLogin = async () => {
  const { error } = await useFetch('/api/auth/login', {
    method: 'POST',
    body: {
      username: loginForm.username,
      password: loginForm.password
    },
    credentials: 'include'
  })
  if (!error.value) {
    // 登录成功跳转到首页
    await navigateTo('/')
  }
}

登出逻辑

调用后端登出接口，后端清除对应Cookie即可完成登出：

const handleLogout = async () => {
  await useFetch('/api/auth/logout', {
    method: 'POST',
    credentials: 'include'
  })
  await navigateTo('/login')
}

4. 封装通用请求方法，适配服务端渲染场景 #

如果是Nuxt服务端发起的请求（比如useFetch的服务端渲染阶段），需要手动将客户端请求的Cookie透传给后端，封装通用请求方法如下：

// composables/useCustomFetch.ts
export const useCustomFetch = (url: string, options: any = {}) => {
  // 从服务端请求头中获取Cookie
  const headers = useRequestHeaders(['cookie'])
  return useFetch(url, {
    ...options,
    credentials: 'include',
    headers: {
      ...headers,
      ...options.headers
    }
  })
}

后续所有需要鉴权的请求都使用这个封装的useCustomFetch即可。

Nuxt 2 实现差异 #

• 中间件放在middleware/auth.js，需要在nuxt.config.js里配置全局中间件，或者在对应页面单独指定中间件
• 服务端透传Cookie通过req.headers.cookie获取，挂载到axios的请求头中
• 给axios全局配置withCredentials: true即可自动携带Cookie

注意事项 #

• 不要在前端JS中手动操作JWT对应的Cookie，所有Cookie的读写都交给后端处理，避免安全风险
• 如果需要进一步防范CSRF攻击，可以额外加CSRF Token校验：后端把CSRF Token存在非HttpOnly的Cookie中，前端请求时从Cookie读取CSRF Token放到请求头，后端做双重校验
• 如果项目是SSG静态站点模式，全局中间件只会在客户端执行，建议加加载状态避免页面闪跳

内容的提问来源于stack exchange，提问作者Sangit raj kc