title: Vue.js with Vue-Router AJAX call before application starts
body: <p>I'm creating simple application with allows to login, restore password and some other actions for logged users.</p>
  
  <p>I am also using Vue-Router. I want to create 3 different types of routes:</p>
  
  <ul>
  <li>allow only for logged users (example: change password)</li>
  <li>allow only for unlogged users (example: restore password)</li>
  <li>allow for everyone (example: homepage)</li>
  </ul>
  
  <p>I have two functions with are calling before all routes</p>
  
  <pre><code>router.beforeEach(Authentication.OnlyLoggedAllowed)
  router.beforeEach(Authentication.OnlyNotLoggedAllowed)
  </code></pre>
  
  <p>I also want to login user if it's possible (AJAX call to API). To use it I have tried to add code <strong>BEFORE</strong> <code>route.beforeEach(...)</code></p>
  
  <pre><code>import Vue from "vue"
  import VueRouter from "vue-router"
  import VueResource from "vue-resource"
  
  ...
  
  Authentication.TryLogin.bind(Vue)();
  
  ...
  
  router.beforeEach(Authentication.OnlyLoggedAllowed)
  router.beforeEach(Authentication.OnlyNotLoggedAllowed)
  
  new Vue({
      router
  }).$mount("div#application")
  </code></pre>
  
  <p>Is it stupid to add function <code>TryLogin()</code> to <code>router.beforeEach(..)</code>? AJAX call after every page change is not really smart.</p>
  
  <p>But I have problem because <code>this.$http</code> in my <code>TryLogin()</code> function returns <code>undefined</code>.</p>
  
  <p>Or maybe I should raw AJAX call if there's no other way.</p>
  
  <p>After all I will make this call synchronous.</p>