web-dev-qa-db-fra.com

L'en-tête de jeton d'interception Axios est présent dans config mais pas dans les en-têtes de requête

J'ai créé axios interceptor, chargé d'ajouter des jetons avant que chaque demande ne soit envoyée à l'API de repos.

import axios from 'axios';
import { store } from '../store/store';

export default function execute() {
    axios.interceptors.request.use(function(config) {
        const token = store.state.token;
        if(token) {
            config.headers.Authorization = `Bearer ${token}`;
            console.log(config);
            return config;
        } else {
            console.log('There is not token yet...');
            return config;
        }
    }, function(err) {
        return Promise.reject(err);
    });
}

Comme vous pouvez le voir à la ligne 2, j'importe du stockage vuex et c'est en fait le lieu où mon jeton est déposé. À la ligne 8, j'ajoute en fait ce jeton à l'objet config, puis à la ligne suivante, je le console.

Il est exécuté dans mon fichier main.js comme suit: 

import interceptor from './helpers/httpInterceptor.js';
interceptor();

Le jeton est présent dans l'objet config que je vois dans ma console (parce que j'ai consolé l'objet config):

 img

Il s'exécute chaque fois que je demande à laisser reposer l'API comme prévu. Si un jeton existe (après la connexion), il devrait ajouter un en-tête de jeton à chaque demande. Malheureusement, il ne l'ajoute pas bien qu'il soit présent sur l'objet config, ce qui me rend un peu confus.

Cela n'ajoute pas de jeton à la demande réelle, comme je peux le voir dans l'onglet Réseau:

 imgd

Cette capture est bien sûr prise après la connexion, donc le jeton est déjà dans le stockage de vuex et il a été consolé par la configuration (une partie de interceptor) après l’exécution de la fonction de déconnexion (appel de l’API repos).

En conséquence, j'ai l'état 400 (requête incorrecte) en réponse de mon API de repos car je n'ai pas envoyé de jeton.

MODIFIER!!!

Je me demandais ce que je pouvais ajouter à cette question pour la rendre meilleure. Je pense qu’il est impossible de créer un démo plunker, j’ai donc décidé de créer un petit repository demo que vous pouvez télécharger et voir l’affaire pour vos yeux. J'espère que ça va aider à résoudre le problème!

javascripthttpvuejs2axiosinterceptor
10
BT101

Je le découvre.

Je ne savais pas qu'il y avait quelque chose appelé demande de contrôle en amont qui était exécutée avant la demande réelle de repos de l'API. Si la demande de contrôle en amont échoue, il n'acceptera/ne recevra pas d'autres en-têtes. C'est pourquoi je ne l'ai pas vu à la demande réelle dans l'onglet réseau de la console chrome, mais dans l'objet config qui était console.loged dans l'interceptor.

Identique dans la démo du référentiel qui appelait une URL non existante, la requête de contrôle en amont a également échoué. Lors de la création de cette démo, je ne savais pas que la demande de contrôle en amont existait. J'étais donc persuadé que le fait d'appeler un point de terminaison d'URL existant ou fictif importait peu. Je pensais que, dans les deux cas, je devrais pouvoir voir demande en-tête là-bas.

4
BT101

Vous pouvez également manipuler la réponse au jeton de nettoyage une fois expiré.

  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    if (401 === error.response.status) {
      console.log("Session Expired")
      //window.location = '/login'
    } else {
      return Promise.reject(error);
    }
  });
0
Marcelo Cintra de Melo