javascript - Laravel 和 Vue.js 身份验证

Question

在我的 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(); 的 promise 没有返回，所以 auth.user.authenticated 总是 false!

如何解决这个问题？

非常有帮助!

Answer 1

对于遇到同样问题的 future 用户

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