Static GitHub Issues

[2767] Store action with axios sync issue

prev: Why nuxtServerInit doesn't work with axios this case?
next: Can't get Nuxt to work in a Yarn workspace

I have a component with this method block:

methods: {
  async login() {
    await this.$store.dispatch('auth/login', {
      'username': this.username,
      'password': this.password
    })
  }
}

I have a auth.js in store directory and it has this action:

  ['login'] ({ commit }, username, password ) {
    AuthenticationService.login(commit, username, password);
  }

My AuthenticationService login method ends with this axios call looks like this:

axios(authOptions)
      .then(function (response) {
        commit('setTokenData', { login: response.data });
      })
      .catch(function (error) {
        throw error
      })

The commit setTokenData invokes a mutation namely this one:

setTokenData(state, data) {
    state.oauth = data.login;

    this.$axios.setToken(data.login.access_token);
  },

I get a valid access token when the credentials are correct however in my component I want to wait for the accesstoken before redirecting otherwise a redirect is done all the time. I have been trying everything. Experimented with async and await and absolutely nothing works. There are great nuxt js tutorials online and also store examples however the most important part namely stores working with rest calls aren't explained anywhere!!!!!!!!

How do you properly implment a rest call in a store action? Is it an idea to put such an example online?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2400">#c2400</a>)</em></sub></div>