Unable to handle 401 errors myself


#1

(I already asked this question here, but I think I’ll get more luck on this forum.

Basically, I have a login page made with VueJS that will return some JWT data if the user successfully manages to log in. If he forgets to fill in one field of enters a wrong credential, AdonisJS will return a 401 error saying that something (missing field / wrong credential) happened.

Here is my AdonisJS code:

async login ({request, auth, session, response}) {
  const rules = {
    email: 'required|email',
    password: 'required'
  }

  const {email, password} = request.only(['email', 'password'])
  const validation = await validate({ email, password }, rules)

  if (!validation.fails()) {
    try {
      return await auth.withRefreshToken().attempt(email, password)
    } catch (e) {
      response.status(401).send({ error: 'Invalid email or password' })
    }
  } else {
    response.status(401).send(validation.messages())
  }
}

And here is my login form’s code on submit:

methods: {
  signin () {
    this.$axios.post('/login', {email: this.email, password: this.password})
      .then(response => {
        console.log(response)
        if (response.status === 200) {
          document.cookie = `token=${response.data.token}`
          document.cookie = `refresh_token=${response.data.refreshToken}`
          console.log(document.cookie)
          // this.$router.replace({ name: 'admin' })
        } else if (response.status === 401) {
          this.error = response.data.error
        } else {
          console.log(response)
      })
  }
}

When trying this code, I deliberately entered wrong credentials to make sure everything was working correctly, but nothing happened (this.error stayed empty). When I opened my console, I saw the following:

console-error

While this is exactly what I was expecting, I don’t understand why it shows up in the console. How can I “remove” that?

Thank you in advance


#2

Hello @Jaeger767
To Handle error, you need to modify your signin method. to handle errors.
More details here :
https://github.com/axios/axios#handling-errors

Try this

methods: {
  signin () {
    this.$axios.post('/login', {email: this.email, password: this.password})
      .then(response => {
        console.log(response)
        if (response.status === 200) {
          document.cookie = `token=${response.data.token}`
          document.cookie = `refresh_token=${response.data.refreshToken}`
          console.log(document.cookie)
          // this.$router.replace({ name: 'admin' })
        } else if (response.status === 401) {
          this.error = response.data.error
        } else {
          console.log(response)
        }
      })
    .catch(function (error) {
      if (error.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else if (error.request) {
        // The request was made but no response was received
        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
        // http.ClientRequest in node.js
        console.log(error.request);
      } else {
        // Something happened in setting up the request that triggered an Error
        console.log('Error', error.message);
      }
    });
  }
}

#3

Okaaay that makes more sense! I didn’t know I could retrieve my response from the catch() function, thanks!