在Nuxt.js中将$ auth模块的重定向与$ router.push一起使用-CSDN博客

在Nuxt.js中使用auth模块时遇到问题，当调用`auth.loginWith`后页面重定向，导致后续的`$router.push`未执行。解决方案是禁用auth模块的重定向并在成功登录后手动执行$router.push。通过在`nuxt.config.js`的auth配置中设置`redirect: false`，可以确保在执行完登录后的代码后再进行视图更新和重定向。

摘要由CSDN通过智能技术生成

最近，我遇到了在Nuxt.js中使用auth模块并以相同的方法在后续代码行中调用$ router.push的问题 。当auth.loginWith方法之后的行未按预期执行时，这个难题就开始了，因为该页面已被重定向到重定向URI。

在Vue.js领域只有一周的时间，所以我想这个问题是许多新手面临的问题。

因此，一切都从这里开始：

我有一个authenticate（）函数，其主体如下所示：

try {
 await this .$auth.loginWith( 'local' , { data : this .user })
 // some other line of code that shows loading msgs
 // ...
 this .$router.push( this .localePath({ path : 'dashboard' }))
} catch (e) {
  // handling error
}

现在，请注意，一旦调用了第2行 ，该执行就会移交给nuxt.js的auth中间件。因此，在第5行中使用$ router.push是多余的。

在继续进行之前，让我们看一下auth的配置在哪里定义：

转到： nuxt.config.js

查找密钥auth

  auth: {
    redirect : {
      login : '/login' ,
      logout : '/' ,
      callback : '/login' ,
      home : 
    },

注意， home键。

答对了！

这正是我们要调整的地方。

在进行任何调整之前，我们先弄清楚我们要做什么以及为什么 ：

我们希望使用auth模块提供的所有好东西，而不是重定向的东西。
必须先执行$ auth.loginWith之后的行，然后才能更新视图。在这种情况下，需要在成功登录后将用户重定向到仪表板之前显示加载和成功通知。

现在，剩下要做的就是在auth选项中禁用重定向大小写

home: false会做好！

现在， nuxt.config.js中的auth对象看起来像这样：

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

am！我们完了。

先前发布在 https://medium.com/consol/using-auth-modules-redirect-in-tandem-with-router-push-in-nuxt-js-d6d703e0a85a

From: https://hackernoon.com/using-dollarauth-modules-redirect-in-tandem-with-dollarrouterpush-in-nuxtjs-i68r3yi8