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

【问题标题】：Catch error server response with @nuxtjs/auth使用@nuxtjs/auth 捕获错误服务器响应
【发布时间】：2019-02-27 10:39:54
【问题描述】：

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

如果我包含用户，它会拒绝登录，所以我想知道它为什么返回 undefined。

配置：

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 都返回 undefined。

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

【问题讨论】：

标签： vuejs2 nuxt.js

【解决方案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)
    }
}

【讨论】：

【解决方案2】：

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

我最初不确定这里可能出了什么问题，因为我看不到完整的 nuxt.config.js 和您的完整组件，但这里有几件事需要检查：

@nuxtjs/axios 已安装
axios 和 auth 模块都在nuxt.config.js 的modules 部分注册： modules: [ '@nuxtjs/axios', '@nuxtjs/auth' ]
另外，确保在组件/页面组件中设置auth 的middleware 属性。

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

【讨论】：

【解决方案4】：

我一直在使用 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"],

【讨论】：