Next-Auth登出时Middleware处理异常问题排查与修复

原因分析 #

你当前的登出逻辑存在两个核心问题：

1. Next-Auth默认重定向行为冲突：signOut()方法默认会在登出成功后自动重定向到登录页面，你先调用router.push('/')跳首页，随后的signOut()重定向会覆盖这次跳转，导致页面闪一下首页后立刻跳登录页。
2. 异步操作顺序不可控：router.push是客户端导航，signOut是异步请求，两者执行时机没有绑定，服务器端会话失效后，全局的会话检测逻辑也可能强制触发登录跳转。

修复方案 #

直接利用signOut()的内置配置，指定登出后重定向到首页，不需要手动调用router.push，保证登出与重定向的原子性：

修改后的登出组件代码：

"use client"

import { useSession, signOut } from 'next-auth/react'

export default function SignOut() {
    const { data: session } = useSession();

    const handleSignOut = async () => {
        // 配置signOut直接重定向到首页
        await signOut({ callbackUrl: '/' });
    };

    return (
        <li className="list-none">
            <p style={{ marginRight: '1rem' }}>Welcome, {session?.user?.name} </p>
            <button onClick={handleSignOut} className="text-sm">
                Sign Out
            </button>
        </li>
    )
}

关键说明 #

• callbackUrl: '/'：指定登出完成后跳转的目标页面为首页，这个地址需要确保在Next-Auth的允许重定向列表中（通常在next-auth.config.js的callbacks配置或环境变量NEXTAUTH_URL相关设置中默认允许根路径）。
• 你的Middleware仅保护/dashboard路径，首页/无需身份验证，所以登出后跳转首页不会被Middleware拦截，用户可以正常停留在首页并手动选择登录。

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