Vue.js interceptor

Wie kann ich einen interceptor im vue.js? Also, bevor Sie jedes Anforderung/Antwort-sollte es zuerst gehen Sie auf die interceptor. Ich such schon eine Menge, aber nicht finden können, eine gute Dokumentation darüber.

Möchte ich nutzen, JWTAuth wie diese:

(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 ich abfangen, bevor jeder request/response. (Ich benutze Laravel 5.2).

Haben Sie sich überlegt mit vue-Ressource?

InformationsquelleAutor Jamie | 2016-05-14

  1. 18

    Beispiel für eine 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 für outcoming traffic und response wenn für eingehende Nachrichten

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

    BEARBEITEN - da sytax geändert haben und nun sollte es so 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');
    }
  });
});
    erwähnenswert ist, dass diese Antwort ist ein wenig veraltet, die syntax ist jetzt etwas anders. Als Linus bemerkte in seiner Antwort, überprüfen Sie die docs: github.com/pagekit/vue-resource/blob/master/docs/...
    was ist, wenn ich hinzufügen vue.http.intercepters in mehrere Dateien ?? dann code geht in jeder Datei, bevor die http-Aufruf ?

    InformationsquelleAutor lukpep

  2. 3

    Vue selbst hat keine AJAX-Funktionalität. Sprechen Sie über die plugin-vue-Ressource, oder haben Sie eine andere Bibliothek für Anforderungen?

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

    Sie können links zu " Abschnitt (github.com/vuejs/vue-resource/blob/master/docs/...) statt scrollen

    InformationsquelleAutor Linus Borg

Schreibe einen Kommentar