Console error with vue-auth and axios: "Uncaught (in promise) Error: Request failed with status code 401"

Question

For authentication I'm using vue-auth@^3.2.0-beta with the axios HTTP driver. axios itself is on 0.19.2.

Sample code

this.$auth.login({ data: body, redirect: false }).then(
() => {
    // Do success stuff...
},
e => {
    this.error = true
    if (e.response.status === HttpStatus.UNAUTHORIZED) {
      this.loginFailed++;
    }
});

If the user provides invalid credentials, the server responds with a 401 and an error message is shown. This is working as it should.

When inspecting the console though, then I see the following error message. It does not seem to have any "functional consequence" but I'm wondering why this error is thrown. While I do understand that there must be some uncaught promise, I don't have any idea where that could be.

Uncaught (in promise) Error: Request failed with status code 401
    createError createError.js:16
    settle settle.js:17
    handleLoad xhr.js:61
    dispatchXhrRequest xhr.js:36
    xhrAdapter xhr.js:12
    dispatchRequest dispatchRequest.js:52
    promise callback*request Axios.js:61
    wrap bind.js:9
    node_modules axios.1.x.js:51
    node_modules vue-auth.esm.js:819
    node_modules vue-auth.esm.js:818
    node_modules Login.vue?vue&type=script&lang=js&:149
    VueJS 4
    method backend.js:1793
    node_modules UAForm.vue?vue&type=script&lang=js&:12
    submit UAForm.vue:13
    VueJS 33
createError.js:16

Answer 1

I think the problem is in using axios! there is no catch in your code.

I think your code should contain catch like below

login () {
      this.$auth.login({
        data: this.data,
      })
        .then((res) => {    
         ....
        })
        .catch((err) => {
         .....    
        })
      }