使用@nuxt/auth v5.0.0带查询参数跳转登录时栈溢出问题求助

问题原因 #

这是无限重定向循环引发的栈溢出：当访问受保护路由时，@nuxt/auth 检测到用户未登录，会重定向到 /?auth=login；但如果根路径（/）本身被设为受保护路由，或者插件的身份验证逻辑没排除带 ?auth=login 参数的根路径，插件会再次判定用户未登录，重复触发重定向请求，最终耗尽调用栈。

而改用 /auth 时，这个独立路径通常不会被设置为受保护路由，所以不会触发二次重定向，自然不会出现循环问题。

解决方案 #

方案1：排除带参数的根路径，跳过验证拦截 #

在 nuxt.config.ts 的 auth 配置中，添加路由排除规则，让 /?auth=login 不触发身份验证检查：

export default defineNuxtConfig({
  modules: ['@nuxt/auth'],
  auth: {
    redirect: {
      login: '/?auth=login',
      logout: '/',
      callback: '/?auth=login',
      home: false
    },
    // 排除带登录参数的根路径
    routes: {
      exclude: ['/?auth=login']
    },
    strategies: {
      // 你的身份验证策略配置（比如local、oauth等）
    }
  }
})

方案2：改用独立登录页面，通过参数传递状态 #

如果不想修改路由排除规则，建议继续用独立的 /auth 登录页面，在页面内读取查询参数处理登录状态：

1. 调整 auth 重定向配置：

auth: {
  redirect: {
    login: '/auth?from=login',
    logout: '/',
    callback: '/auth?from=callback',
    home: false
  }
}

2. 在 /auth 页面中处理参数：

<template>
  <div v-if="$route.query.from === 'login'">
    <!-- 登录表单区域 -->
  </div>
  <div v-if="$route.query.from === 'callback'">
    <!-- 登录回调处理区域 -->
  </div>
</template>

<script setup>
const route = useRoute()
// 根据query参数执行对应逻辑
if (route.query.from === 'callback') {
  // 处理第三方登录回调等逻辑
}
</script>

方案3：自定义中间件手动控制重定向逻辑 #

如果需要更灵活的控制，可以自定义路由中间件替代默认的 auth 中间件：

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to) => {
  const { status } = useAuth()
  
  // 如果是登录重定向的路径，跳过验证
  if (to.path === '/' && to.query.auth === 'login') {
    return
  }
  
  // 对其他受保护路由进行验证
  if (status.value !== 'authenticated') {
    return navigateTo('/?auth=login')
  }
})

然后在 nuxt.config.ts 中启用该中间件：

export default defineNuxtConfig({
  router: {
    middleware: ['auth']
  }
})

内容的提问来源于stack exchange，提问作者Данил Пономаренко