2016-10-05 4 views
0

В моем приложении vue.js у меня есть система входа в систему. Моя main.js выглядит следующим образом:Laravel & Vue.js Аутентификация

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; 
    }); 
}); 

Так что на каждом запросе я проверяю пользователю auth.checkAuth(); эта функция выглядит следующим образом (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('/'); 
     }); 
    } 

Так что моя проблема в том, что в моем router.beforeEach ->auth.user.authenticated я проверяю пользователь аутентифицируется. Но так как обещание от auth.checkAuth(); не возвращается, поэтому auth.user.authenticated всегда фальшиво!

Как исправить эту проблему?

Было бы очень полезно!

+0

Любой! Пожалуйста! – Jamie

ответ

1

Для будущих пользователей, имеющих одну и ту же проблему

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 
     } 
    }); 
}); 
Смежные вопросы