¿Cómo pasar el token Header JWT con Axios & React?

Investigamos por el mundo online para así darte la solución a tu inquietud, si continúas con inquietudes puedes dejarnos tu duda y respondemos con mucho gusto, porque estamos para servirte.

Solución:

En primer lugar, cuando inicia sesión y envía el nombre de usuario y la contraseña al backend, en respuesta obtiene token_id. ahora intente almacenar tokens en session_storage y redirigir a la página de su deseo. ahora tomas token_id en tu página de deseos y almacenas una variable como…

let user = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id;

ahora tiene token y pasa el encabezado y obtiene datos en respuesta

const api = `your api here`
axios.get(api,  headers: "Authorization" : `Bearer $token` )
        .then(res => {
            console.log(res.data);
        this.setState(
            items: res.data,  /*set response data in items array*/
            isLoaded : true,
            redirectToReferrer: false
        )

Nota : debe establecer elementos en blanco array en setState inicial como como

this.state=
            items:[],
            isLoaded: false,
            redirectToReferrer:false,
            token:''
        

Incluye tu token como autorización key como a continuación.

axios.post(url,data, 
    headers: 
        'authorization': your_token,
        'Accept' : 'application/json',
        'Content-Type': 'application/json'
    
)
.then(response => 
    // return  response;
)
.catch((error) => 
    //return  error;
);

cómo-pasar-header-jwt-token-with-axios-react ???

---

Este es un ejemplo para crear una instancia de axios con URL base de la API y JWT_TOKEN
globalmente y acceda a él para diferentes llamadas API

paso 1: crear static instancia para axios

static axiosInstance =  axios.create(
    baseURL: "BASE_API_URL",
    timeout: 5000,
    headers: 
      'Authorization': "JWT_TOKEN",
      'Content-Type': 'application/json'
    
  ); 

---

este es el segundo setep access axiosInstance ya creado y usarlo con API REST dinámica llamadas

paso 2: acceder static instanciar y enlazar API_URL a URL base

export const x = (data) => dispatch => 
    axiosInstance.post('API_URL',
        
            PLAYLOAD
        )
        .then(function (response) 

        )
        .catch(function (error) 

        );

URL de API = BASE_API_URL + API_URL y soltero JWT_TOKEN para todos y esta muy limpio, claro y funcionando.

Si haces scroll puedes encontrar las explicaciones de otros usuarios, tú además tienes la libertad de insertar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador