Nuxt3集成Sidebase NuxtAuth登出异常：错误页闪现与重定向循环

问题现象 #

• 错误页闪现：在/dashboard页面执行登出后，会短暂停留在/dashboard并显示错误页，随后才重定向到登录页/auth/login
• 异常重定向循环：点击登出按钮后，应用出现/dashboard到/dashboard的短暂重定向循环，之后才跳转至登录页

相关配置与代码 #

Nuxt配置文件(nuxt.config.ts) #

export default defineNuxtConfig({
  auth: {
    globalAppMiddleware: true,
    disableServerSideAuth: false,
    baseURL: 'api/auth',
    sessionRefresh: {
      enablePeriodically: true,
      enableOnWindowFocus: true
    },
  }
});

NuxtAuth处理文件(server/api/auth/[...].ts) #

import { NuxtAuthHandler } from "#auth";
import AzureADProvider from "next-auth/providers/azure-ad";
import prisma from "~/lib/prisma";

export default NuxtAuthHandler({
  secret: useRuntimeConfig().authSecret,
  providers: [
    AzureADProvider.default({
      clientId: useRuntimeConfig().azure.clientId,
      clientSecret: useRuntimeConfig().azure.clientSecret,
      tenantId: useRuntimeConfig().azure.tenantId,
    }),
  ],
  callbacks: {
    async signIn({ user }) {
      const userExists = !!(await prisma.user.findUnique({
        where: { email: user.email ?? undefined },
      }));

      if (!userExists) {
        return false;
      }

      return true;
    },
  },
  pages: {
    error: "/auth/error",
    signIn: "/auth/login",
  }
});

登录页(pages/auth/login.vue) #

<template>
  <div>
    <button @click="signIn('azure-ad');"> Microsoft </button>
    {{status}}
  </div>
</template>

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

const { signIn, status } = useAuth()
</script>

仪表盘页(pages/dashboard.vue) #

<template>
  <div>
    <h1>Dashboard</h1>
    {{status}}
    <button @click="signOut()">Logout</button>
  </div>
</template>

<script lang="ts" setup>
 const { status, signOut } = useAuth();
 const router = useRouter();
</script>

疑问 #

1. 为何从/dashboard重定向时会短暂显示错误页？
2. 为何登出后应用会出现/dashboard到/dashboard的重定向循环？

问题原因与解决方法 #

1. 错误页闪现的修复 #

原因：全局认证中间件(globalAppMiddleware: true)在登出时，服务端会话已失效但客户端状态未同步更新，中间件误将未认证状态判定为认证错误，触发了配置的/auth/error页面。

修复：
在dashboard页面中，登出时直接指定重定向地址，避免中间件误触发错误页：

<!-- 修改dashboard.vue的脚本与模板 -->
<script lang="ts" setup>
definePageMeta({
  auth: {
    authenticatedOnly: true,
    navigateUnauthenticatedTo: '/auth/login'
  }
})

const { status, signOut } = useAuth();

const handleLogout = async () => {
  await signOut({ redirectTo: '/auth/login' });
};
</script>

<template>
  <div>
    <h1>Dashboard</h1>
    {{status}}
    <button @click="handleLogout()">Logout</button>
  </div>
</template>

2. 重定向循环的修复 #

原因：服务端与客户端认证状态不同步，服务端已清除会话，但客户端仍保留旧状态，导致中间件先允许访问/dashboard，随后客户端状态更新后又触发重定向，形成短暂循环。

修复：
调整NuxtAuth配置，优先让客户端处理认证状态，避免服务端与客户端状态冲突：

// 修改nuxt.config.ts中的auth配置
export default defineNuxtConfig({
  auth: {
    globalAppMiddleware: true,
    disableServerSideAuth: true, // 改为true，由客户端处理认证检查
    baseURL: 'api/auth',
    sessionRefresh: {
      enablePeriodically: true,
      enableOnWindowFocus: true
    },
  }
});

额外调试建议 #

• 在nuxt.config.ts中添加debug: true，开启Nuxt调试模式查看中间件执行日志
• 监控认证状态变化，确认登出时状态是否及时更新：

<script lang="ts" setup>
const { status, signOut } = useAuth();

watch(status, (newStatus) => {
  console.log('Auth status changed:', newStatus);
});
</script>

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