Nuxt3中从Cookie获取Access Token并存入Pinia Store的最优方法与时机

合适的执行位置 #

最优的执行位置是Nuxt插件，原因有二：

1. 插件在应用初始化阶段（路由渲染前）运行，能确保页面组件依赖token时，Pinia状态已经初始化完成。
2. 插件支持区分服务端/客户端执行，适配SSR场景下的Cookie读取逻辑。

如果不需要处理SSR，也可以用app.vue的onMounted钩子，但插件的全局初始化能力更可靠。

最优实现步骤 #

1. 配置Pinia #

确保已经安装并配置了Pinia：

• 安装依赖：npm install @pinia/nuxt pinia
• 在nuxt.config.ts中启用Pinia模块：

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

2. 创建Auth Store #

在stores/auth.ts中定义存储token的Pinia状态：

import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    accessToken: null as string | null
  }),
  actions: {
    setAccessToken(token: string | null) {
      this.accessToken = token
    }
  }
})

3. 编写初始化插件 #

根据Cookie是否为HttpOnly，分两种情况处理：

情况1：Cookie非HttpOnly（客户端可直接读取）

创建plugins/init-auth.ts通用插件：

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

export default defineNuxtPlugin(() => {
  const authStore = useAuthStore()
  // 替换为你的实际Cookie键名
  const accessTokenCookie = useCookie('access_token')

  if (accessTokenCookie.value) {
    authStore.setAccessToken(accessTokenCookie.value)
  }
})

这个插件会在服务端和客户端都执行：服务端从请求头读取Cookie，客户端从document.cookie读取，然后统一存入Pinia。

情况2：Cookie为HttpOnly（客户端无法直接读取）

这种情况需要分服务端和客户端插件配合：

• 服务端插件读取Cookie，将token注入Nuxt应用上下文：

// plugins/init-auth.server.ts
export default defineNuxtPlugin((nuxtApp) => {
  const accessTokenCookie = useCookie('access_token')
  if (accessTokenCookie.value) {
    nuxtApp.provide('initialAccessToken', accessTokenCookie.value)
  }
})

• 客户端插件从应用上下文获取token，存入Pinia：

// plugins/init-auth.client.ts
import { useAuthStore } from '~/stores/auth'

export default defineNuxtPlugin((nuxtApp) => {
  const authStore = useAuthStore()
  const initialToken = nuxtApp.$initialAccessToken

  if (initialToken) {
    authStore.setAccessToken(initialToken)
  }
})

注意事项 #

• 确保Cookie键名与后端设置的完全一致。
• 如果使用SSR，注意服务端Pinia实例是请求隔离的，不会出现跨请求状态污染。
• 若token有过期时间，可在插件中额外校验过期时间，无效则清空Pinia状态并删除Cookie。

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