title: Wait for axios API call in vuex to finish before continuing vue-router guard
body: <p>I have a django-rest-axios-vuejs application stack for which I'm trying to do something in the <code>vue-router</code>.</p>
  <p>In the <code>vue-router</code> <code>beforeEach</code> guard, I'm verifying permissions and it is done by checking something in an object called <code>me</code> in vuex store. Everything works well except when I refresh the page.</p>
  <p>Indeed refreshing the page also clears vuex store and my <code>beforeEach</code> tries to check the <code>me</code> object from the store which is empty.</p>
  <p>Therefore I'd like to fetch this <code>me</code> object from the API if it isn't in the store.
  The problem is that it takes &quot;some time&quot; and the <code>hasPermission()</code> method executes before the API call is finished.</p>
  <p>So I tried to put a <code>await</code> keyword before my API call but it doesn't work.</p>
  <blockquote>
  <p>My <code>beforeEach</code> guard :</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>router.beforeEach(async (to, from, next) =&gt; {
    const isLoggedIn = getIsLoggedIn()
    handleLoggedInStatus(isLoggedIn)
    if (to.meta.requiresAuth) {
      if (isLoggedIn) {
        if (to.meta.permission) {
          if (!store.state.me) await store.dispatch('FETCH_ME')
          hasPermission(to.meta.permission) ? next() : next({ name: 'HomePage' })
        } else {
          next()
        }
      } else {
        next({ name: 'LoginForm' })
      }
    } else {
      next()
    }
  })
  </code></pre>
  <blockquote>
  <p>My action from the store :</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>actions: {
      FETCH_ME: (state) =&gt; {
        http
          .get('base/users/me/')
          .then(response =&gt; {
            state.me = response.data
          })
          .catch(error =&gt; {
            console.log(error)
          })
      }
    }
  </code></pre>
  <p>The only way I've found to make it wait is to do the following :</p>
  <pre class="lang-js prettyprint-override"><code>function sleep (ms) {
    return new Promise(resolve =&gt; setTimeout(resolve, ms))
  }
  
  router.beforeEach(async (to, from, next) =&gt; {
    const isLoggedIn = getIsLoggedIn()
    handleLoggedInStatus(isLoggedIn)
    if (to.meta.requiresAuth) {
      if (isLoggedIn) {
        if (to.meta.permission) {
          if (!store.state.me) {
            store.dispatch('FETCH_ME')
            await sleep(2000)
          }
          hasPermission(to.meta.permission) ? next() : next({ name: 'HomePage' })
        } else {
          next()
        }
      } else {
        next({ name: 'LoginForm' })
      }
    } else {
      next()
    }
  })
  </code></pre>
  <p>To make it wait a &quot;random&quot; (2 seconds) amount of time with a little <code>sleep()</code> method.</p>
  <p>I'm kinda new to the usage of <code>async</code> <code>await</code> so.. What am I missing to make <code>await store.dispatch('FETCH_ME')</code> work ?</p>
  <p>Thanks in advance :)</p>