Quiero agregar el token jwt a mi axiosinstance en Login.js pero me da error
IDX12729: No se puede decodificar el encabezado '[PII está oculto. Para obtener más detalles, consulte https://aka.ms/IdentityModel/PII.]' como codificado en Base64Url...]
Aquí está mi código:
Iniciar sesión.js
const printValues = e =>{ axiosInstance.post('/auth', data) .then(res =>{ console.log("adding token"); const config = axiosInstance.interceptors.request.use(function (config) { config.headers.Authorization = res.data.token; return config; }); axiosInstance.get('/User/GetUserByID/0', config) .then(res =>{ //set user details }) .catch(err =>{ console.log(err); }) }use no devuelve una configuración para que la pase a las solicitudes. Siempre que esté utilizando la misma instancia, la configuración se modificará.
axiosInstance.interceptors.request.use(function (config) { config.headers.Authorization = res.data.token; return config; }); axiosInstance.get('/User/GetUserByID/0') .then(res =>{ //set user details }) .catch(err =>{ console.log(err); })Primero, no defina interceptores dentro de un controlador de respuesta. Eso significa que agregará un interceptor cada vez que realice esa solicitud.
Por lo general, mantendría el estado de su token y el interceptor separados de otro código de aplicación. Dondequiera que haya creado su axiosInstance es un buen candidato.
Por ejemplo...
import axios from "axios" const axiosInstance = axios.create({ // .. }) const token = null // initial state axiosInstance.interceptors.request.use(async config => { if (!token) { // note, use a separate axios instance for this request const { data } = await axios.post("/auth", dataFromSomewhere) token = data.token } config.headers.Authorization = `Bearer ${token}` // you may need "Bearer" here return config }) Ahora puede usar axiosInstance para realizar solicitudes y resolverá de forma transparente su token de autorización si es necesario antes de continuar.
const printValues = e => { axiosInstance.get("/User/GetUserByID/0") .then(res =>{ //set user details }) .catch(err =>{ console.log(err); }) }