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

时间:2018-09-23 21:41:15

标签: vuejs2 nuxt.js

我正在尝试捕获@ nuxtjs / auth的错误响应,但除了未定义外,它似乎未返回任何内容。

如果我包含用户,它将拒绝登录,因此我想知道为什么它返回未定义。

配置:

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);
},

4 个答案:

答案 0 :(得分:1)

您可以使用e.response

async login() {
    try {
      const login = {
        username: this.username,
        password: this.password
      }
      let response = await this.$auth.loginWith('local', { data: login })
      console.log('response', response)
    } catch (e) {
      console.log('Error Response', e.response)
    }
}

答案 1 :(得分:0)

最初我不确定这里可能出什么问题,因为我看不到完整的nuxt.config.js和完整的组件,但是这里有一些要检查的地方:

  • @nuxtjs/axios已安装
  • axiosauth这两个模块都注册在modules的{​​{1}}部分中: nuxt.config.js
  • 还要确保在组件/页面组件中设置了modules: [ '@nuxtjs/axios', '@nuxtjs/auth' ]的{​​{1}}属性。

确保您正在遵循此页面上的文档:https://auth.nuxtjs.org/getting-starterd/setup

答案 2 :(得分:0)

我遇到了同样的问题,花了一些时间后,我发现了一种很好的方法来捕捉响应。解决方案是使用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);
  });
}

答案 3 :(得分:0)

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

var request = new HttpRequestMessage(HttpMethod.Post, "http://foo/");
request.Content = stringContent;
request.SetTimeout(TimeSpan.FromSeconds(8)); // Uses HttpRequestExtensions from article
var cts = new CancellationTokenSource(TimeSpan.FromSeconds(8));
var response = await client.SendAsync(request, cts.Token);

在nuxt.config中指定令牌字段

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;
  }
},