sidebase/nuxt-auth刷新token无法更新问题求助

项目背景 #

基于Nuxt 3开发的项目，已集成sidebase/nuxt-auth模块实现身份认证。

问题详情 #

• 已完成sidebase/nuxt-auth的安装与配置
• 登录功能正常，access token和refresh token均可正确设置
• 调用auth/refresh接口后，access token按预期更新，但refresh token始终保持不变
• 控制台及服务器日志无报错，且API已返回新的refresh token

预期与实际行为 #

预期调用auth/refresh接口后，refresh token随access token一同更新；实际仅access token更新，refresh token未变化（原refresh token无法重复使用，导致后续刷新失败）

配置代码（nuxt.config.ts） #

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
    devtools: { enabled: true },
    publicRuntimeConfig: {
        apiBaseUrl: process.env.API_BASE_URL
    },
    build: {
        transpile: ['vuetify'],
    },
    modules: [
        (_options, nuxt) => {
            nuxt.hooks.hook('vite:extendConfig',
                (config) => {
                    // @ts-expect-error
                    config.plugins.push(vuetify({ autoImport: true }))
                })
        },
        '@vueuse/nuxt',
        '@sidebase/nuxt-auth',
    ],
    vite: {
        vue: {
            template: {
                transformAssetUrls,
            },
        },
    },
    auth: {
        globalAppMiddleware: true,
        baseURL: process.env.API_BASE_URL + 'Auth/',
        provider: {
            type: 'refresh',
            endpoints: {
                signIn: { path: 'Login', method: 'post' },
                signOut: { path: 'Logout', method: 'post' },
                signUp: { path: 'Registration', method: 'post' },
                getSession: { path: 'GetUser', method: 'get' },
                refresh: { path: 'Refresh', method: 'post' }
            },
            token: {
                property: 'token', 
                maxAge: 1800,
                global: true,
            },
            refreshToken: {
                property: 'refreshToken',
                data: 'refreshToken',
                maxAge: 60 * 60 * 24 * 30,
                signInResponseRefreshTokenPointer: '/refreshToken' 
            },
        },
        sessionDataType: { username: 'string', projects: "{ id: number, name: string }[]" },
        session: {
            enableRefreshPeriodically: 1000 * 60 * 60,  
            enableRefreshOnWindowFocus: true,
        }
    }
})

Refresh接口响应格式 #

{
    "token": "ey...",
    "refreshToken": "k2..."
}

解决方案 #

1. 手动更新refresh token #

sidebase/nuxt-auth的refresh流程在部分场景下不会自动更新refresh token，可手动提取响应中的新refresh token并设置：

const auth = useAuth()

// 手动触发刷新并更新refresh token
const handleRefresh = async () => {
  const response = await auth.refresh()
  if (response?.refreshToken) {
    auth.setRefreshToken(response.refreshToken)
  }
}

2. 升级依赖版本 #

旧版本@sidebase/nuxt-auth可能存在refresh token更新的bug，执行命令升级到最新版：

npm update @sidebase/nuxt-auth

3. 验证存储位置 #

refresh token默认存储在httpOnly的cookie中，无法通过控制台直接查看，需在浏览器「Application」面板的「Cookies」中检查是否更新。若API返回新值但cookie未更新，排查跨域cookie配置（如SameSite、Domain参数）。

4. 自定义refresh拦截逻辑 #

通过auth模块的钩子拦截refresh成功事件，手动更新refresh token：

// plugins/auth.ts
export default defineNuxtPlugin(() => {
  const auth = useAuth()
  
  auth.hooks.hook('refresh:success', ({ response }) => {
    const newRefreshToken = response.data.refreshToken
    if (newRefreshToken) {
      auth.setRefreshToken(newRefreshToken)
    }
  })
})

内容的提问来源于stack exchange，提问作者Ondřej