Published on

Obteniendo datos con axios y JavaScript Web Tokens (jwt)

Authors

Al hacer login el backend me regresa un token que se usa para validar todas las peticiones a la API

Recuerda importar axios

Supongamos que ya guardaste los datos que te dio el backend en el localStorage por lo que primero hay recuperarlos y guardarlos en una variable, en este ejemplo datos:

const datos = JSON.parse(localStorage.getItem('user'))

El siguiente paso es recuperar solo el token, que es lo que necesitamos para hacer las peticiones:

const token = datos.token

Voy a utilizar Bearer por lo que prepararo el header:

const headers = `Bearer ${token}`

Ahora la petición con axios debe tener el header, de lo contrario el backend te respondera con un error:

axios
.get('http://localhost:3000/api/', {
headers: { Authorization: headers },
})
.then((response) => {
console.log(response.data)
})
.catch((err) => {
console.log(err)
})

Al final deberías tener algo así:

const datos = JSON.parse(localStorage.getItem('user'))
const token = datos.token
const headers = `Bearer ${token}`
axios
.get('http://localhost:3000/api/v1/cfdi', {
headers: { Authorization: headers },
})
.then((response) => {
console.log(response.data)
})
.catch((err) => {
console.log(err)
})

Saludos.