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.