Laravel 和 Vue.js 身份验证答案

【问题标题】：Laravel & Vue.js AuthenticationLaravel 和 Vue.js 身份验证
【发布时间】：2017-02-14 03:56:19
【问题描述】：

在我的vue.js 应用程序中，我有一个登录系统。我的main.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 总是假的！

我该如何解决这个问题？

会很有帮助！

【问题讨论】：

任何人！请！

标签： javascript php laravel authentication vue.js

【解决方案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
        }
    });
});

【讨论】：