web-dev-qa-db-fra.com

intercepteur vue-resource pour les en-têtes d'authentification

J'essaie de configurer une application frontale Vuejs (modèle de webpack vue-cli) pour s'asseoir au-dessus de mon Laravel API.

Je suis en mesure d'obtenir une réponse réussie de l'API avec vue-resource en fournissant le bon jeton d'authentification, par exemple:

methods: {
    getUser () {
      this.$http.get('http://localhost:8000/api/user', 
      {
        headers: {
          'Authorization': 'Bearer eyJ0e.....etc',
          'Accept': 'application/json'
        }
      }).then((response) => {
        this.name = response.data.name
      });
    },

Cependant, j'essaie maintenant de configurer des intercepteurs afin que le jeton d'authentification de l'utilisateur soit automatiquement ajouté pour chaque demande.

Sur la base du readme de vue-resource, j'essaie ceci dans mon main.js:

Vue.use(VueResource)

Vue.http.interceptors.Push((request, next) => {
  request.headers['Authorization'] = 'Bearer eyJ0e.....etc'
  request.headers['Accept'] = 'application/json'
  next()
})

Et puis de retour dans mon composant, je n'ai plus que:

this.$http.get('http://localhost:8000/api/user').then((response) => {
    this.name = response.data.name
});

Problème:

Lorsque je spécifie les en-têtes dans le get lui-même, j'obtiens une réponse réussie, mais quand je les passe à travers le interceptor je récupère un 401 Unauthorized depuis le serveur. Comment puis-je résoudre ce problème pour répondre avec succès lors de l'utilisation de l'intercepteur?

Edit: Lorsque j'utilise dev-tools pour afficher les requêtes sortantes, je vois le comportement suivant:

Lors de la demande en fournissant les en-têtes à $http.get, J'effectue une demande OPTIONS puis une demande GET réussie avec l'en-tête Authentication fourni à la demande GET.

Cependant, lorsque je supprime les en-têtes du $http.get directement et les déplacer vers l'intercepteur, je fais seulement une demande GET et le GET ne contient pas l'en-tête Authentication, donc il revient comme un 401 Unauthorized.

vue.jsvue-resource
12
tam5

Il s'avère que mon problème était la syntaxe pour laquelle je mettais les en-têtes dans l'intercepteur.

Cela devrait être comme ceci:

Vue.use(VueResource)

Vue.http.interceptors.Push((request, next) => {
  request.headers.set('Authorization', 'Bearer eyJ0e.....etc')
  request.headers.set('Accept', 'application/json')
  next()
})

Pendant que je faisais ça:

Vue.use(VueResource)

Vue.http.interceptors.Push((request, next) => {
  request.headers['Authorization'] = 'Bearer eyJ0e.....etc'
  request.headers['Accept'] = 'application/json'
  next()
})
31
tam5

Ajoutez cette option:

Vue.http.options.credentials = true;

Et utilisez les intercepteurs de manière globale:

Vue.http.interceptors.Push(function(request, next) {

request.headers['Authorization'] = 'Basic abc' //Base64
request.headers['Accept'] = 'application/json'
next()

});

0
Satu