Nuxt 3客户端如何无需刷新获取更新后的Session？

在SSR环境中，nuxt-auth-utils的客户端Session默认是从页面初始渲染的HTML中获取的缓存值，页面导航时不会主动重新拉取服务端更新后的Session，所以会出现服务端更新令牌后客户端不同步的情况。可以通过以下方式实现无需刷新页面同步Session：

方案：通过API刷新令牌并手动更新客户端Session #

1. 编写服务端刷新令牌API #

在server/api/refresh-token.ts中实现刷新逻辑，更新服务端Session后返回新的令牌数据：

export default defineEventHandler(async (event) => {
  // 执行Keycloak令牌刷新逻辑，获取新的令牌数据
  const json = await yourKeycloakRefreshLogic() // 替换为你的实际刷新代码

  // 更新服务端Session
  await setUserSession(event, {
    access_token: json.access_token,
    access_token_expires_in: json.expires_in,
    refresh_token: json.refresh_token,
    refresh_token_expires_in: json.refresh_expires_in
  })

  // 将新令牌返回给客户端
  return {
    access_token: json.access_token,
    access_token_expires_in: json.expires_in,
    refresh_token: json.refresh_token,
    refresh_token_expires_in: json.refresh_expires_in
  }
})

2. 客户端调用API并更新Session #

在组件中调用上述API，拿到新令牌后直接更新响应式的session值，页面会自动同步显示最新数据：

<script setup lang="ts">
const { session } = useUserSession()

// 手动触发令牌刷新的函数
const refreshToken = async () => {
  try {
    const newTokens = await $fetch('/api/refresh-token')
    // 合并原有Session数据与新令牌，更新响应式状态
    session.value = { ...session.value, ...newTokens }
  } catch (err) {
    console.error('令牌刷新失败', err)
  }
}
</script>

<template>
  <button @click="refreshToken">刷新令牌</button>
  <pre>{{ session?.access_token }}</pre>
  <pre>{{ session?.refresh_token }}</pre>
</template>

原理说明 #

nuxt-auth-utils的客户端Session是在页面首次渲染时从服务端注入的，后续页面导航不会重新请求服务端Session。通过主动调用API获取最新令牌并更新响应式的session状态，就能实现无需刷新页面同步服务端更新后的Session数据。

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