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

最近,我遇到了在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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值