0

I'm working the authentification part of a website, here is the method called when the user send the connexion form :

login() {
   this.$store.dispatch('RETRIEVE_TOKEN', {
        username: this.username,
        password: this.password,
    })
}

And the action : 

RETRIEVE_TOKEN(context, credentials) {

  return new Promise((resolve, reject) => {
    axios.post('someurl/auth', {
       email: credentials.username,
       password: credentials.password
          })

          .then(response => {
              const token = response.data.key

              localStorage.setItem('key', token)
              context.commit('retrieveToken', token)
              resolve(response)

              this.$router.push('/backoffice')
          })

          .catch(error => {
             console.log(error);
             reject(error)
          });

        })
    }

My issue is that the this.$router.push('/backoffice') is called even if the user send the wrong password and usermail. I don't understand why. Can someone explain to me please?

blickblick
  • 197
  • 1
  • 4
  • 15
  • What are the contents of the response object in that case? – Will Nov 07 '18 at 17:40
  • why are you returning a Promise? – Tomas Ramirez Sarduy Nov 07 '18 at 17:46
  • 1
    The promise wasn't rejected. You need to check the response for a 400 error and handle accordingly. – Hongyu Wang Nov 07 '18 at 17:46
  • Just `console.log` the response and check what are you getting. Also, no need to return a Promise: `RETRIEVE_TOKEN(context, credentials) { return axios.post('/someurl/auth', ...` – Tomas Ramirez Sarduy Nov 07 '18 at 17:51
  • 1
    Off-topic but axios returns a promise so you should avoid creating another promise as this is an [anti-pattern](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it). – Husam Ibrahim Nov 07 '18 at 17:51
  • Thank you all for your help. I'm kinda new to axios and promises, I'm trying to figure out how it works. I want it to redirect to /backoffice + give a token if the user credentials match, or display an error message if not. Am I doing it wrong? – blickblick Nov 07 '18 at 17:56
  • @blickblick you're not doing it wrong but if the response of the Http request is 200 or successful it will go to the then() function so in your then function there is no logic that traps the incorrect password or username or if checking the token, the catch() function is only triggered when you have a runtime or syntax error or if the Http request return 500 or other Error Status. – HuntsMan Nov 08 '18 at 01:48

1 Answers1

1

It seems that server returns 200 with an empty key even if username and password are not valid. We can add a condition to check if token is available or not

RETRIEVE_TOKEN(context, credentials) {
  return axios.post('someurl/auth', {
     email: credentials.username,
     password: credentials.password
  })
  .then(response => {
    console.log(response.data) // If it not works, please show what's logged here
    const token = response.data.key

    if (token) { // check if token is valid
      localStorage.setItem('key', token)
      context.commit('retrieveToken', token)
      this.$router.push('/backoffice')
    } else {
      console.log('Token is not available')
    }
  })
  .catch(error => {
     console.log(error);
  });
}
ittus
  • 21,730
  • 5
  • 57
  • 57