How to make an async call in a beforeCreate hook of a Vue instance?
<p>I am building a Vuejs app with authentication.</p>

<p>When the page is loaded and I initialise the <code>app</code> Vuejs instance, I am using <code>beforeCreate</code> hook to set up the user object. I load a JWT from <code>localStorage</code> and send it to the backend for verification.</p>

<p>The issue is that this is an async call, and the components of this <code>app</code> object (the navbar, the views etc.) are being initialised with the empty user data before the call returns the result of the verification.</p>

<p>What is the best practice to delay the initialisation of child components until a promise object resolves?</p>

<p>Here is what I have in my Vue app object:</p>

<pre><code>beforeCreate: function(){
    // If token or name is not set, unset user client
    var userToken = localStorage.userToken;
    var userName = localStorage.userName;
    if (userToken == undefined || userName == undefined) {
      StoreInstance.commit('unsetUserClient');
      // I WANT TO RESOLVE HERE
      return;
    }

    // If token and name is set, verify token
    // This one makes an HTTP request
    StoreInstance.dispatch({type: 'verifyToken', token: userToken}).then((response) =&gt; {
      // I WANT TO RESOLVE HERE
    }, (fail) =&gt; {
      // I WANT TO RESOLVE HERE
    })
  }
</code></pre>