Hängen Sie den Authorization-Header für alle Axios-Anforderungen an

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 React/Redux und bin mir nicht sicher, welcher Ansatz am besten ist, und ich finde keine Qualitätstreffer 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 ist im Redux Store unter gespeichert state.session.token.

Ich bin etwas ratlos, wie ich weiter 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 sind sehr willkommen, danke.

Lösung des Problems

Es gibt mehrere Möglichkeiten, dies zu erreichen. Hier habe ich die zwei gängigsten Ansätze erklärt.

1. Sie können Axios-Interceptoren verwenden, um alle Anforderungen abzufangen und Autorisierungsheader hinzuzufügen.

// Add a request interceptor
axios.interceptors.request.use(function (config) {
 const token = store.getState().session.token;
 config.headers.Authorization = token;
 return config;
});

2. Aus der Dokumentation von axioskönnen Sie ersehen, dass ein Mechanismus verfügbar ist, mit dem Sie einen Standard-Header festlegen können, der mit jeder von Ihnen gestellten Anfrage gesendet wird.

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

Also in deinem Fall:

axios.defaults.headers.common['Authorization'] = store.getState().session.token;

Wenn Sie möchten, können Sie eine selbstausführbare Funktion erstellen, die den Autorisierungsheader selbst setzt, wenn das Token im Store vorhanden ist.

(function() {
 String token = store.getState().session.token;
 if (token) {
 axios.defaults.headers.common['Authorization'] = token;
 } else {
 axios.defaults.headers.common['Authorization'] = null;
 /*if setting null does not remove `Authorization` header then try 
 delete axios.defaults.headers.common['Authorization'];
 */
 }
})();

Jetzt müssen Sie Token nicht mehr manuell an jede Anfrage anhängen. Sie können die obige Funktion in der Datei platzieren, die garantiert jedes Mal ausgeführt wird ( zB: Datei, die die Routen enthält).

Ich hoffe es hilft:)