Tengo una aplicación react / redux que obtiene un token de un servidor api. Después de que el usuario se autentica, me gustaría hacer que todas las solicitudes de axios tengan ese token como un encabezado de autorización sin tener que adjuntarlo manualmente a cada solicitud en la acción. Soy bastante nuevo en reaccionar / redux y no estoy seguro del mejor enfoque y no encuentro ningún resultado de calidad en Google.
Aquí está mi configuración de redux:
// 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;
}
}
Mi token se almacena en la tienda redux debajo state.session.token.
Estoy un poco perdido sobre cómo proceder. Intenté hacer una instancia de axios en un archivo en mi directorio raíz y actualizar / importar eso en lugar de desde node_modules, pero no adjunta el encabezado cuando cambia el estado. Cualquier comentario / idea es muy apreciado, gracias.