webentwicklung-frage-antwort-db.com.de

Der Axios-Interceptor-Token-Header ist in der Konfiguration vorhanden, jedoch nicht in den Request-Headern

Ich habe Axios Interceptor erstellt, der für das Hinzufügen von Token verantwortlich ist, bevor jede Anforderung an meine Rest-API gesendet wird.

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);
    });
}

Wie Sie in Zeile 2 sehen können, importiere ich vuex-Speicher. Dies ist der Ort, an dem mein Token abgelegt wird. In Zeile 8 füge ich dieses Token tatsächlich zu config object hinzu und in der nächsten Zeile tröste ich es.

Es wird in meiner main.js-Datei wie folgt ausgeführt: 

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

Das Token ist im config-Objekt vorhanden, das ich in meiner Konsole sehe (weil ich config-Objekt getröstet habe):

 img

Es wird jedes Mal ausgeführt, wenn ich wie erwartet eine Anforderung an die API-API mache. Wenn ein Token vorhanden ist (nach der Anmeldung), sollte es zu jeder Anforderung einen Tokenheader hinzufügen. Leider wird es nicht hinzugefügt, obwohl es auf dem Konfigurationsobjekt vorhanden ist, was mich etwas verwirrt macht.

Es fügt tatsächlich kein Token zu einer realen Anforderung hinzu, wie ich auf der Registerkarte "Netzwerk" sehen kann:

 imgd

Dieser Screenshot wird natürlich nach der Anmeldung erstellt. Das Token befindet sich also bereits im Vuex-Speicher und wird nach der Ausführung der Abmeldefunktion (die die Rest-API aufrufen) config (Teil des Interceptors) herausgeholt.

Im Ergebnis habe ich als Antwort von meiner Rest-API den Status 400 (schlechte Anforderung), weil ich kein Token gesendet habe.

BEARBEITEN !!!

Ich habe darüber nachgedacht, was ich zu dieser Frage hinzufügen kann, um sie besser zu machen. Ich denke, dass es unmöglich ist, einen Demo-Plunker zu erstellen, also habe ich beschlossen, eine kleine repository -Demo zu erstellen, die Sie herunterladen können und das Problem für Ihre Augen sehen können. Ich hoffe, es hilft, das Problem zu lösen!

10
BT101

Ich finde es heraus.

Ich wusste nicht, dass es etwas gibt, das als Preflight-Anfrage bezeichnet wird, das vor der eigentlichen Request-to-Rest-API ausgeführt wird. Wenn die Preflight-Anfrage fehlschlägt, werden keine weiteren Header akzeptiert/empfangen. Aus diesem Grund habe ich es nicht auf echte Anfrage in der Netzwerk-Registerkarte der Chrome-Konsole gesehen, aber es befand sich in einem Konfigurationsobjekt, das in Interceptor console.loged war.

In Repository-Demo, die nicht vorhandene URL aufrief, dasselbe Problem fehlgeschlagen. Bei der Erstellung dieser Demo hatte ich keine Ahnung, dass es so etwas wie eine Preflight-Anfrage gibt, also war ich mir sicher, dass es egal ist, ob ich einen vorhandenen URL-Endpunkt oder einen fiktiven URL anrufe dort Kopf anfragen.

4
BT101

Sie können die Antwort auf das Bereinigungstoken auch bearbeiten, wenn sie abgelaufen ist.

  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);
    }
  });