title: Waiting request located in middleware finished before rendering page
body: <p>I have an issue here. I use Vue.js alongside with Nuxt.js.</p>
  
  <p>I made middleware to implement the authentication. Here I use JSON Web Token. I have accessKey and refreshKey. The refreshKey is used to request the new accessKey when the accessKey has expired. So in the middleware I call the action that make the request to the API. Here's my code:</p>
  
  <p>home/index.vue</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  I'm protected resource
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    middleware: 'authentication'
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>middleware/authentication.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import { isEmpty } from 'lodash'
  export default async function({ store, redirect, app }) {
    if (isEmpty(refKey)) {
      //logout
    }
    if (isLogin &amp;&amp; !isEmpty(accKey)) {
      // store auth data
    } else if (isLogin &amp;&amp; isEmpty(accKey)) {
      // call action that make request with axios to the API
      return await store.dispatch('user/requestNewToken')
    } else {
      return redirect('/')
    }
  }
  </code></pre>
  
  <p>My action:</p>
  
  <pre><code>async requestNewToken({ dispatch, commit }) {
      const refreshReq = await dispatch('refreshToken')
      if (!isUndefined(refreshReq) {
        await dispatch('setupAuthCookies')
        return refreshReq
      }
    },
  </code></pre>
  
  <p>But the app returns error. This is because the page is rendering before the AXIOS request is finished. How to prevent Vue from redirecting and rendering the page before my axios request (for getting new accessKey) has completely finished? Thanks.</p>