Vuejs2 使用@nuxtjs/auth捕获错误服务器响应

我试图捕捉@nuxtjs/auth的错误响应，但它似乎只返回未定义的内容

login() {
    this.toggleProcessing(0);

    let payload = {
        username: 'admin',
        password: 'admin123'
    }

    let handleSuccess = response => {
        console.log(response);
        this.toggleProcessing(0);
    }

    let handleFailure = error => {
        console.log(error);
        this.toggleProcessing(0);
    }

    this.$auth.loginWith('local', { data: payload }).then(handleSuccess).catch(handleFailure);
},

它拒绝登录，如果我包括用户，所以我想知道为什么它返回未定义

login() {
    this.toggleProcessing(0);

    let payload = {
        username: 'admin',
        password: 'admin123'
    }

    let handleSuccess = response => {
        console.log(response);
        this.toggleProcessing(0);
    }

    let handleFailure = error => {
        console.log(error);
        this.toggleProcessing(0);
    }

    this.$auth.loginWith('local', { data: payload }).then(handleSuccess).catch(handleFailure);
},

配置：

auth: {
    strategies: {
        local: {
            endpoints: {
                login: {
                    url: 'http://127.0.0.1:80/api/login',
                    method: 'post',
                    propertyName: 'token'
                },
                logout: false,
                user: {
                    url: 'http://127.0.0.1:80/api/me',
                    method: 'get',
                    propertyName: undefined
                }
            },
            tokenRequired: true,
            tokenType: 'bearer',
        }
    },
    plugins: [
        '@/plugins/auth.js'
    ]
},

插件：

export default function ({ app }) {
    app.$auth.onError((error, name, endpoint) => {
        console.error(name, error)
    });
}

查看功能： -handleSuccess和handleFailure都返回未定义

login() {
    this.toggleProcessing(0);

    let payload = {
        username: 'admin',
        password: 'admin123'
    }

    let handleSuccess = response => {
        console.log(response);
        this.toggleProcessing(0);
    }

    let handleFailure = error => {
        console.log(error);
        this.toggleProcessing(0);
    }

    this.$auth.loginWith('local', { data: payload }).then(handleSuccess).catch(handleFailure);
},

---

一开始我不确定这里可能有什么问题，因为我看不到完整的

numxt.config.js

和您的完整组件，但这里有一些东西需要检查：

• 已安装

  @nuxtjs/axios

• axios

  和

  auth

  模块都注册在

  numxt.config.js

  的

  modules

  部分：

  模块：[
  “@nuxtjs/axios”，
  “@nuxtjs/auth”
  ]

• 另外，确保在组件/页面组件中设置了

  auth

  的

  中间件

  属性

---

请确保您遵循本页上的文档：

我遇到了相同的问题，在花了一些时间之后，我找到了一个非常好的方法来捕获响应。解决方案是使用axios拦截器。只需将插件文件代码替换为以下代码

export default function ({$axios, $auth}){

  $axios.interceptors.response.use(function (response) {
    // Do something with response data

    return response;
  }, function (error) {
    // Do something with response error

    return Promise.reject(error);
  });
}

---

我一直在使用try->this.$auth.loginWith来捕获带有@nuxtjs/auth的错误服务器响应

login() {
  const data = { form };
  try {
    this.$auth
      .loginWith("local", { data: data })
      .then(api => { 
        // response
        this.response.success = "Succes"; 
      })
      .catch(errors => {
        this.response.error = "Wrong username/password";
      });
  } catch (e) {
    this.response.error = e.message;
  }
},

在nuxt.config中指定令牌字段

strategies: {
  local: {
    endpoints: {
      login: { // loginWith
        url: "auth/login",
        method: "post",
        propertyName: "data.token" // token field
      }, 
      user: { // get user data
        url: "auth/user",
        method: "get",
        propertyName: "data.user"
      },
    }
  }
},

modules: ["@nuxtjs/axios", "@nuxtjs/auth"],

---

您可以使用

e.response

异步登录（）{
试一试{
常量登录={
用户名：this.username，
密码：这个是密码
}
让response=等待。$auth.loginWith（'local'，{data:login}）
console.log（'response'，response）
}捕获（e）{
console.log（'Error Response'，e.Response）
}
}