title: How to make middleware to finish asynchronous request to the server and commit to Vuex store before the page loads?
body: <p>My middleware uses <code>firebase.auth().onAuthStateChanged</code> and stores the user object in the Vuex store in case if it exists. The code works fine, but the page loads before the user object in Vuex store gets set. My another middleware protects certain pages by checking if the user object exists. Thus, if I load <code>http://localhost:3000/protected</code>, I would be declined access, but if I first load another page and proceed to <code>http://localhost:3000/protected</code> through a <code>&lt;nuxt-link&gt;</code> I can access the page.</p>
  
  <p>How do I make nuxt wait for the middleware to setUser before loading pages?</p>
  
  <pre><code>export default async function (context, callback) {
      auth.onAuthStateChanged(user =&gt; {
          if (user) {
              context.store.commit("setUser", user)
              callback()
          } else {
              callback()
          }
      })
  }
  </code></pre>
  
  <hr>
  
  <p>Update:
  Plugins approach yields the same result</p>