Nuxt3应用中外部API访问令牌的存储位置与方式咨询

方法一：使用Nuxt3内置的useCookie（推荐，服务端/客户端兼容） #

Nuxt3提供的useCookie可以在服务端和客户端环境下安全访问，适合存储需要跨页面刷新保留的认证令牌，同时支持设置安全属性降低XSS风险。

修改你的Pinia Store代码如下：

import { defineStore } from "pinia"
import { ref } from "vue"
import { useCookie } from "#app"

export const useAuthStore = defineStore("auth", () => {
  // 初始化时从cookie读取令牌
  const tokenCookie = useCookie("access_token", {
    httpOnly: true, // 禁止JS读取，防范XSS攻击
    secure: process.env.NODE_ENV === "production", // 生产环境仅通过HTTPS传输
    sameSite: "strict",
    maxAge: 86400 // 令牌有效期，建议和API返回的有效期保持一致
  })
  const accessToken = ref(tokenCookie.value || "")
  
  const setAccessToken = (token: string) => {
    accessToken.value = token
    // 同步更新cookie
    tokenCookie.value = token
  }

  const clearAccessToken = () => {
    accessToken.value = ""
    tokenCookie.value = null
  }

  return { accessToken, setAccessToken, clearAccessToken }
})

这种方式下，页面刷新或服务端渲染时都能从cookie中获取令牌，同时兼顾了安全性和兼容性。

方法二：客户端环境下使用localStorage配合Pinia #

如果你的令牌仅在客户端发起请求时使用，不需要服务端渲染阶段获取，可以在客户端环境下将令牌存入localStorage，页面刷新时恢复到Pinia中：

import { defineStore } from "pinia"
import { ref, onMounted } from "vue"
import { process } from "#imports"

export const useAuthStore = defineStore("auth", () => {
  const accessToken = ref("")
  
  // 客户端挂载时从localStorage读取令牌
  onMounted(() => {
    if (process.client) {
      const savedToken = localStorage.getItem("access_token")
      if (savedToken) {
        accessToken.value = savedToken
      }
    }
  })

  const setAccessToken = (token: string) => {
    accessToken.value = token
    // 仅客户端环境下存入localStorage
    if (process.client) {
      localStorage.setItem("access_token", token)
    }
  }

  const clearAccessToken = () => {
    accessToken.value = ""
    if (process.client) {
      localStorage.removeItem("access_token")
    }
  }

  return { accessToken, setAccessToken, clearAccessToken }
})

注意：这种方式下服务端渲染阶段accessToken会是空值，若页面需要在服务端渲染时用令牌请求数据，不推荐此方法。

安全提示 #

• 存储敏感访问令牌时，优先使用httpOnly Cookie，避免XSS攻击窃取令牌。
• 生产环境务必开启secure属性，确保令牌仅通过HTTPS传输。
• 若令牌包含刷新机制，需同步处理刷新令牌的存储逻辑，同样遵循安全原则。

内容的提问来源于stack exchange，提问作者Volkan Elçi