title: How to make an async call in a beforeCreate hook of a Vue instance?
body: <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>