Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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!

share|improve this question
    
Anyone! Please! – Jamie Oct 6 '16 at 9:02

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
        }
    });
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.