Adjunte encabezado de autorización para todas las solicitudes de axios

Tengo una aplicación de reacción/redux que recupera un token de un servidor API. Después de que el usuario se autentique, me gustaría que todas las solicitudes de axios tengan ese token como encabezado de Autorización sin tener que adjuntarlo manualmente a cada solicitud de la acción. Soy bastante nuevo en reaccionar/redux y no estoy seguro de cuál es el mejor enfoque y no encuentro ningún resultado de calidad en Google.

Aquí está mi configuración 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 está almacenado en la tienda redux en state.session.token.

Estoy un poco perdido sobre cómo proceder. Intenté crear una instancia de axios en un archivo en mi directorio raíz y actualizarla/importarla en lugar de desde node_modules, pero no adjunto el encabezado cuando cambia el estado. Cualquier comentario/idea es muy apreciado, gracias.

Mar 27 '17 23:03 awwester

Hay varias formas de lograrlo. Aquí he explicado los dos enfoques más comunes.

1. Puede utilizar interceptores de axios para interceptar cualquier solicitud y agregar encabezados de autorización.

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

2. En la documentación puede axiosver que hay un mecanismo disponible que le permite configurar el encabezado predeterminado que se enviará con cada solicitud que realice.

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

Entonces en tu caso:

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

Si lo desea, puede crear una función autoejecutable que establecerá el encabezado de autorización cuando el token esté presente en la tienda.

(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'];
         */
     }
})();

Ahora ya no es necesario adjuntar el token manualmente a cada solicitud. Puede colocar la función anterior en el archivo que se garantiza que se ejecutará cada vez ( por ejemplo: Archivo que contiene las rutas).

Mar 27 '2017 16:03 Hardik Modha

Crear instancia de axios:

// Default config options
  const defaultOptions = {
    baseURL: <CHANGE-TO-URL>,
    headers: {
      'Content-Type': 'application/json',
    },
  };

  // Create instance
  let instance = axios.create(defaultOptions);

  // Set the AUTH token for any request
  instance.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token');
    config.headers.Authorization =  token ? `Bearer ${token}` : '';
    return config;
  });

Luego, para cualquier solicitud, el token se seleccionará de localStorage y se agregará a los encabezados de la solicitud.

Estoy usando la misma instancia en toda la aplicación con este código:

import axios from 'axios';

const fetchClient = () => {
  const defaultOptions = {
    baseURL: process.env.REACT_APP_API_PATH,
    method: 'get',
    headers: {
      'Content-Type': 'application/json',
    },
  };

  // Create instance
  let instance = axios.create(defaultOptions);

  // Set the AUTH token for any request
  instance.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token');
    config.headers.Authorization =  token ? `Bearer ${token}` : '';
    return config;
  });

  return instance;
};

export default fetchClient();

Dec 17 '2017 01:12 llioor

La mejor solución para mí es crear un servicio de cliente del que crearás una instancia con tu token y lo usarás para empaquetar axios.

import axios from 'axios';

const client = (token = null) => {
    const defaultOptions = {
        headers: {
            Authorization: token ? `Token ${token}` : '',
        },
    };

    return {
        get: (url, options = {}) => axios.get(url, { ...defaultOptions, ...options }),
        post: (url, data, options = {}) => axios.post(url, data, { ...defaultOptions, ...options }),
        put: (url, data, options = {}) => axios.put(url, data, { ...defaultOptions, ...options }),
        delete: (url, options = {}) => axios.delete(url, { ...defaultOptions, ...options }),
    };
};

const request = client('MY SECRET TOKEN');

request.get(PAGES_URL);

En este cliente, también puede recuperar el token del almacenamiento local/cookie, como desee.

Mar 27 '2017 16:03 Kmaschta