Nuxt3站点切换用户时浏览器缓存旧JWT致数据异常求助

核心问题分析 #

你遇到的问题本质是：切换账号后，API请求没有使用最新的JWT，而是复用了内存或浏览器缓存中的旧JWT。可能的原因包括：

• 请求时没有实时从localStorage读取JWT，而是依赖初始化时缓存的全局变量
• 登出仅清除了localStorage的JWT，但未同步清除内存中的用户状态/缓存JWT
• 浏览器HTTP缓存导致GET请求复用旧的认证信息

具体解决方案 #

1. 确保每次API请求都读取最新的JWT #

封装统一的API请求函数，每次请求前动态从localStorage获取JWT，避免使用固定的全局变量：

// 封装API请求工具函数
export async function requestApi(url, options = {}) {
  // 每次请求都实时读取最新的JWT
  const jwt = localStorage.getItem('jwt')
  const defaultHeaders = {
    'Content-Type': 'application/json',
    ...(jwt && { Authorization: `Bearer ${jwt}` })
  }

  return await fetch(url, {
    ...options,
    headers: { ...defaultHeaders, ...options.headers },
    // 禁用GET请求缓存（可选，针对浏览器缓存问题）
    cache: 'no-store'
  })
}

之后所有CRUD操作都使用这个函数发送请求，确保每次都带最新的JWT。

2. 优化登出逻辑：同步清除内存状态（如果用状态管理） #

如果你的项目使用Pinia/Vuex存储用户信息或JWT，登出时必须同时重置内存中的状态：

示例（Pinia）：

// stores/auth.js
export const useAuthStore = defineStore('auth', {
  state: () => ({
    jwt: localStorage.getItem('jwt') || null
  }),
  actions: {
    setJwt(token) {
      this.jwt = token
      localStorage.setItem('jwt', token)
    },
    logout() {
      this.jwt = null
      localStorage.removeItem('jwt')
    }
  }
})

登录/登出调用：

// 登录时
const authStore = useAuthStore()
await authStore.setJwt(data.token)

// 登出时
async function logOut() {
  const authStore = useAuthStore()
  authStore.logout()
  await navigateTo('/login')
}

3. 禁用浏览器HTTP缓存（针对GET请求缓存问题） #

如果是浏览器缓存了GET请求导致旧JWT被复用，在请求头中添加缓存控制：

// 在请求中添加以下headers
headers: {
  'Cache-Control': 'no-cache',
  'Pragma': 'no-cache',
  'Expires': '0'
}

或者直接使用cache: 'no-store'（fetch API原生参数），彻底禁用请求缓存。

4. 临时方案：登出后强制页面刷新（不推荐，仅应急） #

如果以上方案暂时无法生效，可以通过强制刷新页面清除内存缓存：

async function logOut() {
  await logout()
  // 用原生location跳转强制刷新，清除内存中的缓存数据
  window.location.href = '/login'
}

验证步骤 #

1. 切换账号登录后，打开浏览器开发者工具（Application/Storage），确认localStorage中的jwt已更新为新账号的令牌
2. 发送CRUD请求时，在Network面板查看请求头的Authorization字段，确认使用的是新JWT
3. 检查数据库的updated_by字段，确认已更新为当前账号ID

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