2016-05-14 5 views
2

Как использовать interceptor в vue.js? Поэтому перед каждым запросом/ответом он должен сначала перейти к перехватчику. Я уже много искал, но не могу найти хорошую документацию об этом.Перехватчик Vue.js

Я хотел бы использовать JWTAuth так:

(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 
)) 

Но я не знаю, как перехватить перед каждым запрос/ответ. (Я использую Laravel 5.2).

+0

Рассматривали ли вы с помощью VUE-ресурс? – gurghet

ответ

11

примера глобальной конфигурации:

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 для исходящего трафика и response если для входящих сообщений

Возможна локальная конфигурация в компоненте vue.

EDIT - так sytax изменилось теперь должно выглядеть следующим образом:

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

, отметив, что этот ответ немного устарел, синтаксис теперь немного отличается. Как отметил Линус в своем ответе, проверьте документы: https://github.com/pagekit/vue-resource/blob/master/docs/http.md#interceptors – Stephan

+0

Что делать, если я добавлю 'vue.http.intercepters' в несколько файлы? то код переходит в каждый файл до того, как он будет называться http? –

3

Vue сам по себе не имеет функциональности AJAX. Вы говорите о vue-ресурсе плагина или используете какую-либо другую библиотеку для запросов?

вю-ресурс поддерживает имеет intereceptors: https://github.com/vuejs/vue-resource/blob/master/docs/http.md (прокрутите вниз до последнего раздела)

+1

вы можете использовать ссылки на раздел (https://github.com/vuejs/vue-resource/blob/master/docs/http.md#interceptors) вместо прокрутки – user3479125