0

我正在使用带有身份验证模块的 NuxtJs v2.13 和带有护照的 Laravel 作为我的后端。对于登录，我使用记录的方法：

async signIn(formData){
  await this.$auth.loginWith('local',{
    data: formData
  })
  if(this.$auth.user.depth > 1){
    this.goTo('/cms/product')
  }else{
    this.goTo('/')
  }
}

当电子邮件或密码错误时，它也会向我发送 nuxt 错误页面！我应该留在登录页面。我应该怎么办！！？

顺便说一句，我vee-validate也会在我的表格上使用。这是我在 nuxt.config.js 上的身份验证配置：

auth: {
      strategies: {
        local: {
          endpoints: {
            login: { url: 'auth/login', method: 'post', propertyName: '' },
            logout: { url: 'auth/logout', method: 'post' },
            user: { url: 'auth/info', method: 'get', propertyName: 'data' }
          }
        }
      },
      redirect: {
        login: '/login',
        logout: '/',
        callback: '/login',
        home: '/'
      },
      cookie: {
        prefix: 'auth.',
        options: {
          path: '/',
          maxAge: process.env.AUTH_COOKIE_MAX_AGE
        }
      }
  },
4

1 回答 1

0

Nuxt 正在重定向，因为错误没有得到处理。您可以简单地将此代码包装在错误处理程序中。将此代码放在登录组件或页面附近也很好，这样您就可以使用错误的状态代码向用户显示一些有意义的响应，例如凭据无效。

try {
  await this.$auth.loginWith('local', {
    data: formData,
  })
  if (this.$auth.user.depth > 1) {
    this.goTo('/cms/product')
  } else {
    this.goTo('/')
  }
} catch (error) {
  if (error.response) {
    // Get the error status, inform the user of the error.
  }

  // Unexpected error, tell the user to try again later.
}

由于该@nuxtjs/auth软件包需要该@nuxtjs/axios软件包，您还可以阅读有关使用Axios Interceptors在全局级别拦截错误的信息。我个人在方法级别使用 try/catch 块，并使用拦截器来捕获401 Unauthenticated错误并从 Vuex 中删除用户信息。

于 2020-08-17T12:24:11.413 回答