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

Verificamos de forma completamente cada uno de los enunciados de nuestro sitio web con la meta de mostrarte en todo momento información con la mayor veracidad y certera.

Solución:

Hay múltiples maneras de lograr esto. Aquí, he explicado los dos enfoques más comunes.

1. Puede usar interceptores 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. De la documentación de axios puede ver que hay un mecanismo disponible que le permite establecer un 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 necesita adjuntar el token manualmente a cada solicitud. Puede colocar la función anterior en el archivo que se garantiza que se ejecutará cada vez (p.ej: Archivo que contiene las rutas).

Espero eso ayude 🙂

Si usa la versión “axios”: “^0.17.1”, puede hacer esto:

Crear instancia de axios:

// Default config options
  const defaultOptions = 
    baseURL: ,
    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 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();

Buena suerte.

La mejor solución para mí es crear un servicio de cliente que instanciará con su token y lo usará para envolver 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 localStorage/cookie, como desee.

Calificaciones y comentarios

Al final de la página puedes encontrar las explicaciones de otros programadores, tú asimismo puedes insertar el tuyo si te gusta.

---

---

Utiliza Nuestro Buscador