使用Vue.JS成功登录后如何重定向到首页

Question

I have a login page. I want my app to redirect the user to the homepage if the login is successful. Then credentials are checked with an API. My problem is, my vue page redirect the users before the credentials are successfully checked.

Seeing similar topic on the vue.js help forum, I understand I am supposed to send the login request, and then wait for the response promise to resolve. I feel like this is what i am doing, but it clearly does not wait for the response to be resolved before redirecting.

Here is my code in my vue page (the script part) . When I click the "signin" button, the onSigninClick() method is called :

import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'SignInLayout',
  data () {
    return {
      username: null,
      password: null
    }
  },
  computed: {
    ...mapGetters('TemplaterAuth', [
      'logged',
      'getUsername',
      'getJwtToken'
    ])
  },
  methods: {
    ...mapActions('TemplaterAuth', [
      'authenticate'
    ]),
    onSigninClick () {
      let creds = {
        username: this.username,
        password: this.password
      }
      this.authenticate(creds).then(response => {
        console.log(this.getUsername)
        console.log(this.getJwtToken)
        console.log('logged:')
        console.log(this.logged)
        this.$router.push('/')
      })
    }
  }
}

and my authenticate() method :

export function authenticate (context, creds) {
  let requestConfig = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  Vue.http.post(
    url + apiPaths.auth,
    creds,
    requestConfig
  ).then(response => {
    return response.json()
  }).then(data => {
    context.commit('setUsername', creds.username)
    context.commit('setJwtToken', data.token)
  }).catch(error => {
    console.log('error:')
    console.log(error)
  })
}

When i click once the login button, my console log shows null for both the username and the jwtToken . Few moments later, the values are updated in the store and then I am able to login.

Answer 1

So, I got my answer on the Vue forum just a few seconds after posting this : I need to return the promise of my authenticate method. So the new code is :

export function authenticate (context, creds) {
  let requestConfig = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  return Vue.http.post(
    url + apiPaths.auth,
    creds,
    requestConfig
  ).then(response => {
    return response.json()
  }).then(data => {
    context.commit('setUsername', creds.username)
    context.commit('setJwtToken', data.token)
  }).catch(error => {
    console.log('error:')
    console.log(error)
  })
}

Source

Answer 2

This looks a bit fishy for me.

First: I hope, you are not using vuex to hold your crentials/token. Security tip #1 , Security tip #2 .

I would recommend only setting authenticated:true and use that for your requests.

Then: Have a look at global guards of the vue router , which could be leveraged, to check, whether the current user is logged in.

Last: To programatically route to sections of your app, you could use router.push .

So, you have to store, which route the user wanted before the login page and programmatically push this route afterwards.