Vue.js Abfangjäger

Question

Wie kann ich einen interceptor in vue.js verwenden? Also vor jeder Anfrage/Antwort sollte es zuerst zum Abfangjäger gehen. Ich habe schon viel gesucht, kann aber keine gute Dokumentation dazu finden.

Ich möchte JWTAuth wie folgt verwenden:

(function (define) { 
    'use strict' 

    define(function (require) { 

    var interceptor 

    interceptor = require('rest/interceptor') 

    /** 
    * Authenticates the request using JWT Authentication 
    * 
    * @param {Client} [client] client to wrap 
    * @param {Object} config 
    * 
    * @returns {Client} 
    */ 
    return interceptor({ 
     request: function (request, config) { 
     var token, headers 

     token = localStorage.getItem('jwt-token') 
     headers = request.headers || (request.headers = {}) 

     if (token !== null && token !== 'undefined') { 
      headers.Authorization = token 
     } 

     return request 
     }, 
     response: function (response) { 
     if (response.status && response.status.code === 401) { 
      localStorage.removeItem('jwt-token') 
     } 
     if (response.headers && response.headers.Authorization) { 
      localStorage.setItem('jwt-token', response.headers.Authorization) 
     } 
     if (response.entity && response.entity.token && response.entity.token.length > 10) { 
      localStorage.setItem('jwt-token', 'Bearer ' + response.entity.token) 
     } 
     return response 
     } 
    }) 

    }) 

}(
    typeof define === 'function' && define.amd ? define : function (factory) { module.exports = factory(require) } 
    // Boilerplate for AMD and Node 
)) 

Aber ich weiß nicht, wie vor jedem Request/Response abzufangen. (Ich benutze Laravel 5.2).

Answer 1

Beispiel für die globale config:

Vue.http.interceptors.push({ 

    request: function (request){ 
    request.headers['Authorization'] = auth.getAuthHeader() 
    return request 
    }, 

    response: function (response) { 
    //console.log('status: ' + response.data) 
    return response; 
    } 

}); 

request ist Verkehr und response wenn für eingehende Nachrichten für outcoming

lokale Konfiguration in vue-Komponente ist ebenfalls möglich.

EDIT - seit sytax jetzt geändert hat es soll wie folgt aussehen:

Vue.http.interceptors.push((request, next) => { 
    request.headers['Authorization'] = auth.getAuthHeader() 
    next((response) => { 
    if(response.status == 401) { 
     auth.logout(); 
     router.go('/login?unauthorized=1'); 
    } 
    }); 
}); 

Answer 2

Vue selbst hat keine AJAX-Funktionalität. Sprechen Sie über die Plugin-Vue-Ressource oder verwenden Sie eine andere Bibliothek für Anfragen?

vue-Ressource unterstützt hat intereceptors: https://github.com/vuejs/vue-resource/blob/master/docs/http.md (scrollen zum letzten Abschnitt unten)