如何从Nuxt 3服务端获取httpOnly Cookie并恢复Pinia状态

1. 核心思路 #

页面刷新时Pinia状态丢失是正常行为，要实现状态持久化，关键是在服务端渲染阶段读取httpOnly Cookie，初始化Pinia状态后，通过Nuxt的状态hydration机制同步到客户端。

2. 具体实现步骤 #

第一步：安装Cookie解析工具 #

服务端拿到的是Cookie字符串，需要解析为键值对，使用cookie包处理：

npm install cookie
# 或
yarn add cookie

第二步：创建Pinia Auth Store #

在stores/auth.ts中定义Store，实现服务端初始化逻辑：

import { defineStore } from 'pinia'
import { useRequestHeaders } from 'nuxt/app'
import { parse } from 'cookie'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    authToken: null
  }),
  actions: {
    async initializeAuth() {
      // 仅在服务端执行Cookie读取逻辑
      if (process.server) {
        // 获取请求头中的Cookie
        const headers = useRequestHeaders(['cookie'])
        if (!headers.cookie) return

        // 解析Cookie字符串为键值对
        const cookies = parse(headers.cookie)
        // 替换为你实际的httpOnly Cookie名称
        this.authToken = cookies['auth-token']

        // 若需获取用户信息，用Token调用后端接口
        if (this.authToken) {
          try {
            const userRes = await $fetch('/api/auth/me', {
              headers: {
                Authorization: `Bearer ${this.authToken}`
              }
            })
            this.user = userRes.data
          } catch (err) {
            // Token失效或出错时清空状态
            this.authToken = null
            this.user = null
          }
        }
      }
    }
  }
})

第三步：通过Nuxt插件自动初始化Store #

创建plugins/auth.ts，确保页面刷新（服务端渲染）时自动执行初始化：

import { useAuthStore } from '~/stores/auth'

export default defineNuxtPlugin(async (nuxtApp) => {
  const authStore = useAuthStore(nuxtApp.$pinia)
  await authStore.initializeAuth()
})

3. 关于useCookie的误区 #

你遇到useCookie返回undefined是正常情况：

• httpOnly Cookie禁止客户端JavaScript访问，所以客户端调用useCookie拿不到值
• 服务端使用useCookie时，必须在Nuxt组合式上下文内（如插件、页面setup、Pinia action），示例：

  // 仅在服务端生效
  if (process.server) {
    const token = useCookie('auth-token')
    console.log(token.value) // 可正常获取httpOnly Cookie的值
  }
  

4. 后端Cookie设置注意事项 #

确保Express后端设置Cookie时配置正确：

// Express登录接口示例
res.cookie('auth-token', user.token, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // 生产环境开启HTTPS
  sameSite: 'strict',
  path: '/', // 确保全站可访问该Cookie
  maxAge: 24 * 60 * 60 * 1000 // 有效期1天
})

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