Ich habe eine React / Redux-Anwendung, die ein Token von einem API-Server abruft. Nachdem sich der Benutzer authentifiziert hat, möchte ich, dass alle Axios-Anforderungen dieses Token als Autorisierungsheader haben, ohne es manuell an jede Anforderung in der Aktion anhängen zu müssen. Ich bin ziemlich neu in der Reaktion / Redux und bin mir nicht sicher, wie ich am besten vorgehen soll. Ich finde keine hochwertigen Treffer bei Google.
Hier ist mein Redux-Setup:
// actions.js
import axios from 'axios';
export function loginUser(props) {
const url = `https://api.mydomain.com/login/`;
const { email, password } = props;
const request = axios.post(url, { email, password });
return {
type: LOGIN_USER,
payload: request
};
}
export function fetchPages() {
/* here is where I'd like the header to be attached automatically if the user
has logged in */
const request = axios.get(PAGES_URL);
return {
type: FETCH_PAGES,
payload: request
};
}
// reducers.js
const initialState = {
isAuthenticated: false,
token: null
};
export default (state = initialState, action) => {
switch(action.type) {
case LOGIN_USER:
// here is where I believe I should be attaching the header to all axios requests.
return {
token: action.payload.data.key,
isAuthenticated: true
};
case LOGOUT_USER:
// i would remove the header from all axios requests here.
return initialState;
default:
return state;
}
}
Mein Token wird im Redux Store unter gespeichert state.session.token
.
Ich bin ein bisschen verloren, wie ich vorgehen soll. Ich habe versucht, eine Axios-Instanz in einer Datei in meinem Stammverzeichnis zu erstellen und diese anstelle von node_modules zu aktualisieren / importieren, aber der Header wird nicht angehängt, wenn sich der Status ändert. Alle Rückmeldungen / Ideen werden sehr geschätzt, danke.
Antworten:
Es gibt mehrere Möglichkeiten, dies zu erreichen. Hier habe ich die beiden häufigsten Ansätze erläutert.
1. Sie können Axios Interceptors verwenden , um Anforderungen abzufangen und Autorisierungsheader hinzuzufügen.
2. Aus der Dokumentation von können
axios
Sie ersehen, dass ein Mechanismus verfügbar ist, mit dem Sie den Standardheader festlegen können, der bei jeder von Ihnen gestellten Anfrage gesendet wird.Also in deinem Fall:
Wenn Sie möchten, können Sie eine selbstausführbare Funktion erstellen, die den Autorisierungsheader selbst festlegt, wenn das Token im Speicher vorhanden ist.
Jetzt müssen Sie das Token nicht mehr manuell an jede Anforderung anhängen. Sie können die obige Funktion in die Datei einfügen, die garantiert jedes Mal ausgeführt wird ( z. B.: Datei, die die Routen enthält).
Ich hoffe es hilft :)
quelle
axios.defaults.header.common[Auth_Token] = token
so einfach.Wenn Sie die Version "axios": "^ 0.17.1" verwenden, können Sie Folgendes tun:
Instanz von Axios erstellen:
Dann wird für jede Anforderung das Token aus localStorage ausgewählt und den Anforderungsheadern hinzugefügt.
Ich verwende dieselbe Instanz in der gesamten App mit diesem Code:
Viel Glück.
quelle
Die beste Lösung für mich besteht darin, einen Client-Service zu erstellen, den Sie mit Ihrem Token instanziieren und zum Umschließen verwenden
axios
.In diesem Client können Sie das Token auch wie gewünscht aus dem localStorage / Cookie abrufen.
quelle
Ebenso haben wir eine Funktion zum Setzen oder Löschen des Tokens aus Aufrufen wie diesen:
Wir bereinigen immer das vorhandene Token bei der Initialisierung und richten dann das empfangene ein.
quelle
Wenn Sie in Zukunft andere API-Routen aufrufen und Ihr Token im Store behalten möchten, versuchen Sie , Redux-Middleware zu verwenden .
Die Middleware könnte auf die API-Aktion warten und API-Anforderungen entsprechend über Axios senden.
Hier ist ein sehr einfaches Beispiel:
Aktionen / api.js
Middleware / api.js.
quelle
Manchmal tritt ein Fall auf, in dem einige der mit Axios gestellten Anforderungen auf Endpunkte verweisen, die keine Autorisierungsheader akzeptieren. Daher ist die alternative Möglichkeit, den Autorisierungsheader nur für die zulässige Domäne festzulegen, wie im folgenden Beispiel. Platzieren Sie die folgende Funktion in jeder Datei, die bei jeder Ausführung der React-Anwendung ausgeführt wird, z. B. in der Routendatei.
quelle
Versuchen Sie, eine neue Instanz zu erstellen, wie ich es unten getan habe
Wie man es benutzt
quelle
Beim Versuch, etwas Ähnliches zu implementieren, bin ich auf einige Fallstricke gestoßen, und basierend auf diesen Antworten habe ich mir das ausgedacht. Die Probleme, die ich hatte, waren:
quelle