如何解决Nuxt auth模块首次登录报错400时自动重定向到首页的问题

问题根因 #

该异常是@nuxtjs/auth-next模块的默认重定向逻辑导致的：默认调用loginWith方法时，无论登录成功还是失败，模块都会自动触发重定向操作。首次刷新应用后auth模块的状态缓存未初始化，登录失败时会触发默认的首页跳转规则；第二次操作时auth模块的状态已经完成缓存，默认重定向规则不会被触发，因此表现正常。

修复方案 #

1. 禁用登录接口的默认重定向，手动接管跳转逻辑

修改登录组件的loginAuth方法，调用loginWith时传入redirect: false参数，完全屏蔽默认重定向，登录成功后手动跳转到目标页面：

async loginAuth(e) {
  // 先触发表单校验，避免无效提交
  this.$v.$touch()
  if (this.$v.$invalid) return
  this.errors = []
  try {
    await this.$auth.loginWith('local', { 
      data: this.login,
      redirect: false // 核心修改：阻止默认重定向
    })
    // 登录成功后手动跳转到你需要的页面，比如用户中心、首页等
    this.$router.push('/account/dashboard')
  } catch (err) {
    // 捕获错误展示提示
    this.errors = err?.response?.data?.errors || ['邮箱或密码错误，请重试']
    console.log(err.response)
  }
}

2. 清理重复提交逻辑

你的代码中同时在form表单绑定了@submit.prevent="loginAuth"，又在提交按钮上绑定了@click.prevent="loginAuth"，会导致一次提交触发两次登录请求，删除按钮上的click绑定即可：

<button
  type="submit"
  class="ps-btn ps-btn--fullwidth mt-2"
>
  Loginnnnn
</button>

（可选）全局配置重定向规则

如果需要统一修改所有auth相关的重定向行为，可在nuxt.config.js的auth配置中添加redirect节点覆盖默认规则：

auth: {
  redirect: {
    login: '/account/login', // 未登录时访问授权页跳转的登录地址
    logout: '/account/login', // 登出后跳转地址
    home: '/', // 登录成功默认跳转地址
    callback: false // 本地登录策略无需回调跳转，直接禁用
  },
  // 保留你原有其他auth配置
  strategies: {
    local: {
      // 原有配置不变
    }
  }
}

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