You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Nuxt3中使用@sidebase/nuxt-auth的refresh provider时,getToken()无法获取令牌数据问题排查

Nuxt3中使用@sidebase/nuxt-auth的refresh provider时,getToken()无法获取令牌数据问题排查

我在Nuxt3的登录功能上遇到了一些问题,已经安装了@sidebase/nuxt-auth包来处理用户认证,以下是我的相关配置和代码,希望能找到getToken()返回null的原因。

1. nuxt.config.ts中的认证配置

auth: {
    globalAppMiddleware: true,
    baseURL: backendUrl,
    provider: {
      type: "refresh",
      endpoints: {
        signIn: { path: "/login/", method: "post" },
        signOut: { path: "/logout/", method: "get" },
        signUp: { path: "/register/", method: "post" },
        refresh: { path: "/refresh/", method: "post" },
        getSession: false,
      },
      pages: {
        login: "/login",
        register: "/register",
      },
      token: {
        signInResponseTokenPointer: "/access",
      },
      refreshToken: { signInResponseRefreshTokenPointer: "/refresh" },
    },

    enableSessionRefreshPeriodically: 5000,
    enableSessionRefreshOnWindowFocus: true,
    globalMiddlewareOptions: {
      allow404WithoutAuth: true, // Defines if the 404 page will be accessible while unauthenticated
      addDefaultCallbackUrl: "/", // Where authenticated user will be redirected to by default
    },
  },

2. 获取令牌的API代码(server/api/auth/token.get.ts)

import { getToken } from "#auth";
export default eventHandler(async (event) => {
  const token = await getToken({ event, cookieName: "auth" });
  console.log(token);
  return token || "no token present";
});

3. 页面中打印令牌的代码

<script setup lang="ts">
definePageMeta({
    auth : false,
})
const headers = useRequestHeaders(['cookie'])
const {data : token} = await useFetch('/api/auth/token', {headers});
</script>
<template>
    <pre>
        {{ token }}
    </pre>
</template>

4. 用户登录逻辑代码

<script setup lang="ts">
definePageMeta({
  layout: "front",
  auth: {
    unauthenticatedOnly: true,
    navigateAuthenticatedTo: '/token',
  }
});

const loginWithCredentials = async () => {
    try {
      let res = await signIn(
        { ...formData },
        { callbackUrl: '/token' } // Where the user will be redirected after a successiful login
      )
      console.log(res);
    } catch (error) {
      console.log("error", error);
    } 
}
</script>

额外说明

  • 我使用自定义后端返回包含JWT令牌的JSON数据,令牌字段为access和refresh。
  • 发送POST请求到后端backEndUrl/login/并提供正确凭证时,会得到包含access和refresh字段的JSON响应。
  • 我将access令牌放到JWT解析工具中验证,能正常解析出有效载荷数据。

问题

我期望getToken()能返回令牌的载荷数据,但实际它返回null,请问可能的问题是什么?

备注:内容来源于stack exchange,提问作者Arnas Erslovas

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.20 02:53:01