Un JWT es un estándar en el desarrollo web, pues nos permite transmitir datos de manera segura y fácil a través de un string encriptado. En este post, te enseñaremos cómo decodificar JWT desde JavaScript para que lo puedas pasar a un objeto de fácil lectura con el que ejecutar distintas acciones.
Antes de empezar
Antes de enseñarte cómo decodificar JWT desde JavaScript, te recomendamos crear una nueva carpeta dentro de tu proyecto llamada utils. Esta carpeta suele usarse en proyectos de desarrollo web para alojar pequeños trozos de código que se emplearán en distintas piezas de nuestro proyecto. El código que crearemos a continuación para decodificar JWT desde JavaScript es de este tipo.
Entonces, dentro de esta carpeta utils, podremos crear un nuevo archivo llamado decodeToken.js para insertar el código que escribiremos a continuación.
¿Cómo decodificar JWT desde JavaScript?
Dentro del archivo decodeToken.js que hemos decidido crear, vamos a declarar una función que reciba el JWT que queremos decodificar. En nuestro caso, hemos guardado el JWT dentro de una variable token, por lo que declaramos la función de la siguiente manera:
export function decodeToken (token) {
}
Tras declarar esta función, insertaremos las palabras clave try catch para controlar los errores. Dentro de la sección try, insertaremos la línea de código que te hemos presentado en nuestro post sobre codificar JWT en JavaScript. A continuación, te mostramos cómo se ven estos pasos dentro de nuestra función:
export function decodeToken (token) {
let decodedToken;
try {
decodedToken = JSON.parse (atob (token.split (‘ . ‘)[1]));
} catch (error) {
return null;
}
}
decodedToken;
Con las líneas de código anteriores, hemos creado una utilidad que se encarga específicamente de decodificar JWT desde JavaScript. Para ello, utiliza distintos métodos fundamentales, como parse y split. Sin embargo, el método que realmente logra lo que queremos es el método atob ( ) que puedes consultar en la página oficial de la MDN.
Además, hemos exportado esta utilidad para que cualquier pieza de nuestro proyecto pueda utilizarla. Para ello, basta con que la pieza importe la función y le pase un JWT.
¿Qué sigue?
Ahora que sabes cómo decodificar JWT desde JavaScript, seguro que quieres seguir aprendiendo sobre los conceptos y lenguajes que hacen posibles muchos proyectos web. Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva e íntegra de alta calidad donde aprenderás todo lo necesario para convertirte en un experto en pocos meses. ¡Pide información y descubre cómo cambiar tu vida!
