Laravel & Vue.js Authentication

Question

In my vue.js application I've a login system. My main.js looks like this:

import Vue from 'vue';
import NProgress from 'nprogress';
import Resource from 'vue-resource';
import Router from 'vue-router';
import App from './App.vue';
import Login from './components/Authentication/Login.vue';
import auth from './Services/Authentication/Auth';


Vue.use(Router);
Vue.use(Resource);

auth.checkAuth();

export var router = new Router({
    history: true
});

router.map({
    '/': {
        name: 'Login',
        component: Login,
        guest: true
    }
});

router.beforeEach((transition) => {    
    if (transition.to.auth && !auth.user.authenticated) {
        transition.redirect('/login');
    } else if (transition.to.guest && auth.user.authenticated) {
        transition.redirect('/');
    } else {
        transition.next();
    }
});

Vue.http.interceptors.push((request, next)  => {    
    NProgress.start();
    const token = auth.getToken();
    request.headers['Authorization'] = 'Bearer ' + token;
    request.headers['X-CSRF-TOKEN'] = document.querySelector('meta[name="token"]').content;

    request.respondWith(request.body);

    next((response) => {
        NProgress.done();

        if (response.status == 404) {
            router.go('/');
        } else if (response.status == 401 && response.data.refreshed_token) {
          // If you received 401 "Unauthorized" response
          // with a refreshed_token in the payload,
          // this means you've got to refresh your token
          auth.setToken(response.data.refreshed_token);
        }

        return response;
    });
});

So on every request I check the user auth.checkAuth(); that function looks like this (Auth.js):

checkAuth () {
     var token || localStorage.getItem('jwt-token');

    if (!token) {
      return false;
    }

    Vue.http.get('/api/me')
      .then(({data}) => {
        this.user.id = data.id;
        this.user.name = data.name;
        this.user.email = data.email;
        this.user.role = data.role;
        this.user.authenticated = true;
      }, ({data}) => {
          router.go('/');
      });
  }

So my problem is that in my router.beforeEach -> auth.user.authenticated I check if the user is authenticated. But because the promise from auth.checkAuth(); is not returned so auth.user.authenticated is always false!

How can I fix this problem?

Would be very helpful!

Answer 1

For future users having the same problem

Vue.http.interceptors.push((request, next)  => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
    next((response) => {
        if(response.status == 401 ) {//or add any error code you want here
            //Do another request for some endpoint here to get a fresh token and override your token variable
        }
    });
});