Axios interceptor token-Header ist in config, aber nicht in Request-Headern vorhanden

Ich habe einen Axios-Interceptor erstellt, der für das Hinzufügen eines Tokens zuständig ist, bevor jede Anfrage an meine Rest-API gesendet wird.

Wie Sie in Zeile 2 sehen können, importiere ich Vuex-Speicher und hier ist mein Token abgelegt. In Zeile 8 füge ich dieses Token tatsächlich zu config -Objekt hinzu und dann tröste ich es in der nächsten Zeile.

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

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

Es wird jedes Mal ausgeführt, wenn ich eine Anfrage zum Zurücksetzen der API wie erwartet mache. Wenn ein Token vorhanden ist (nach der Anmeldung), sollte jeder Anfrage eine Token-Kopfzeile hinzugefügt werden. Leider fügt es es nicht hinzu, obwohl es auf dem Config-Objekt vorhanden ist, was mich etwas verwirrt.

Es fügt tatsächlich kein Token zur echten Anfrage hinzu, wie ich in der Netzwerk-Registerkarte sehen kann:

Dieser Screenshot wurde natürlich nach dem Login erstellt, also befindet sich das Token bereits im Vuex Speicher und es hat config out (Teil des Interceptors) nachdem ich die Logout Funktion ausgeführt habe (welche Call Rest API).

Im Ergebnis habe ich als Reaktion auf meine Rest API 400 (Bad request) Status, weil ich kein Token gesendet habe.

BEARBEITEN !!!

Ich habe überlegt, was ich dieser Frage hinzufügen kann, um es besser zu machen. Ich denke, dass es unmöglich ist, einen Demo-Plocker zu erstellen, also habe ich beschlossen, eine kleine Repository -Demo zu erstellen, die du herunterladen und sehen kannst . Ich hoffe, es wird helfen, das Problem zu lösen!