Nuxt-auth登录跳转问题：如何阻止自动跳转到首页并自定义跳转

我刚好在项目里遇到过和你一模一样的需求，nuxt-auth默认的跳转逻辑确实有点“固执”，不过咱们可以通过几个方式来调整它的行为，实现你要的“阻止自动跳转+自定义跳转路径”的效果：

方案1：通过nuxt-auth配置直接修改跳转目标 #

如果你的需求是所有登录/注册场景都要跳转到/refer，可以直接在nuxt.config.js的auth模块配置里修改默认跳转目标：

// nuxt.config.js
export default {
  modules: ['@nuxtjs/auth'],
  auth: {
    redirect: {
      home: '/refer' // 把默认的首页跳转替换成你的目标路径
    },
    // 其他auth相关配置...
  }
}

方案2：调用方法时传入参数精准控制跳转 #

如果只是注册场景需要跳/refer，登录还是保持原有的跳转逻辑，那可以在调用setUser或者loginWith方法时，传入redirect: false来阻止默认跳转，之后手动控制路由：

// 注册接口请求成功后的处理逻辑
async handleRegister() {
  const res = await this.$axios.post('/api/register', this.registerForm)
  if (res.status === 200) {
    // 阻止自动跳转
    await this.$auth.setUser(res.data.userInfo, { redirect: false })
    // 手动跳转到目标页面
    await this.$router.push('/refer')
  }
}

要是用loginWith方法登录，也可以用同样的参数控制：

await this.$auth.loginWith('local', {
  data: this.loginForm,
  redirect: false // 关闭默认跳转
})
// 按需手动跳转
this.$router.push('/refer')

方案3：利用全局钩子拦截跳转行为 #

如果想全局统一处理登录后的跳转逻辑，还可以通过nuxt-auth的钩子来拦截。先创建一个auth插件：

// plugins/auth.js
export default function ({ $auth, $router }) {
  $auth.onLoggedIn(() => {
    // 返回false直接阻止默认跳转
    return false
    // 也可以根据业务场景判断后自定义跳转
    // if (this.isRegisterScene) {
    //   $router.push('/refer')
    // }
  })
}

然后在nuxt.config.js里注册这个插件：

// nuxt.config.js
export default {
  plugins: ['~/plugins/auth.js'],
  // 其他配置...
}

额外提醒 #

如果你用的是nuxt-auth v5（即@sidebase/nuxt-auth），配置细节会略有不同，比如跳转配置在auth.pages里，或者用navigation相关的钩子，但核心思路一致：要么覆盖默认跳转路径，要么阻止默认行为后手动控制路由。

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