title: vue.js lifecycle and page refresh not working as expected
body: <p>I need a user to stay logged in even when a page is refreshed or a link is entered in the address bar of the browser.</p>
  
  <p>I created some methods for in the store to save and load the user's data to local storage.</p>
  
  <p>in <em>main.js</em> I load the data I need in the <em>created</em> hook like this:</p>
  
  <pre><code>new Vue({
      el: '#app',
      router,
      store,
      render: h =&gt; h(App),
      created() {
          this.$store.dispatch('loadUser');
          const user = this.$store.getters.getUser;
          console.log(`VUE app created. Logged-in user: ${user.username}`);
      }
  });
  </code></pre>
  
  <p>In <em>routes.js</em> I have a <em>beforeEnter</em> hook </p>
  
  <pre><code>path: '/account',
      component: Account,
      beforeEnter: (to,from,next) =&gt; {
          const user = Store.getters.getUser;
          console.log(`Should go to /account, user is ${user.username}`);
          if (!user.username) {
              next('/');
          } else {
              next();
          }
      }
  </code></pre>
  
  <p>I expect the vue app creation to run before the router method but it doesn't. When I refresh the <em>/account</em> page the router <em>beforeEnter</em> hook is called first and the app creation second. So my user is unknown and instead of refreshing the /account page I am redirected to the root page with a login screen.</p>
  
  <p><a href="https://i.stack.imgur.com/BXhck.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BXhck.png" alt="enter image description here"></a></p>
  
  <p>How can I get the expected/wanted behaviour when a user has logged in before and his credentials (JWT token) are in local storage, a page refresh will go to the requested page instead of being redirected and why is the router method called before the vue <em>created</em> hook?</p>
  
  <p>My vue.js version is 2.8.2</p>