Web 浏览器在切换用户会话时将旧的 JWT 保留在缓存中

Question

我的基于 Nuxt3 的网站遇到问题，当我登录到一个用户帐户，然后注销并登录到另一个用户帐户时，我的浏览器不会考虑生成的 JWT。

我的意思是，我在登录时将其存储在 localStorage 中，它工作正常，我可以按预期执行 CRUD。
但是，当我注销并登录到另一个测试帐户时，我的网络浏览器（Chrome、Firefox、Edge）似乎没有更新其缓存中的 JWT 。因此，当我更新数据库中的某些内容时，我的 Updated_by 列会填充上一个登录帐户的 ID，而不是当前帐户的 ID。为了解决这个问题，我必须手动清除浏览器的缓存。

这是我正在使用的登录和注销逻辑。

// Login function
export async function login(credentials) {
  try {
    const runtimeConfig = useRuntimeConfig()
    const response = await fetch(`${runtimeConfig.public.auth}/login`, {
      method: 'POST',
      body: JSON.stringify(credentials),
      headers: {
        'Content-Type': 'application/json',
      },
    })

    if (response.status === 401) {
      throw 'Invalid credentials'
    }

    const data = await response.json()
    if (data.token) {
      localStorage.setItem('jwt', data.token)
      await navigateTo('/dashboard')
    }
  } catch (error) {
    throw error
  }
}

// Logout function
export async function logout() {
  try {
    await localStorage.removeItem('jwt')
  } catch (error) {
    console.error(error)
  }
}

以及组件中调用注销函数的块：

async function logOut() {
  await logout()
  await navigateTo('/login')
}

<button @click="logOut()" class="menu_item">Disconnect</button>

我尝试添加一个

localStorage.clear()

，但我没有尝试清除函数中的缓存，我读到这不是一个好的做法。

我期望做的是每次切换用户帐户时不必手动清除浏览器的缓存，以了解 JWT 数据已更改。

Answer 1

事实证明，我必须在登录和注销功能中添加

window.location.reload()

 才能使其正常工作。这根本不是缓存问题。