Decodificar un JWT es un paso muy importante a la hora de identificar un usuario y determinar las acciones que puede o no ejecutar, al igual que los elementos de interfaz que se le presentarán. En este post, te enseñaremos cómo dar permiso de borrado desde JavaScript usando los datos datos de login del usuario que se encuentran en su JWT.
¿Qué es el permiso de borrado?
Cuando hablamos de dar permiso de borrado desde JavaScript estamos pensando en permitir que un usuario de una aplicación web borre un contenido. ¿Por qué hablamos de permiso y no de un simple método? Pues porque no todo usuario debe ser capaz de borrar todos los contenidos. Por ello, debemos dar permiso de borrado solamente a aquellos usuarios propietarios del contenido que desean borrar. En este sentido, podemos hacer que solo se activen los elementos de interfaz necesarios para esta eliminación para los usuarios que siguen esta condición.
Usualmente, los permisos de borrado o edición se representan con iconos como una papelera o un lápiz. Según la lógica de tu aplicación, estos aparecerán en el listado de contenidos o en la página de detalle de un contenido específico. Para conocer más sobre esta última posibilidad, te invitamos a leer nuestro post sobre crear una página detalle en JavaScript.
A continuación, te enseñaremos cuáles son los pasos para generar este permiso.
¿Cómo dar permiso de borrado desde JavaScript?
Para dar permiso de borrado desde JavaScript a un usuario, deberemos ejecutar una lógica que determine que el usuario que ha iniciado sesión es el mismo que ha creado el contenido que está revisando. Para ello, deberemos usar el JWT que se devuelve cuando el usuario inicia sesión. En el caso de que esta lógica nos devuelva un resultado o valor booleano true, con lo que quiere decir que sí es el mismo usuario, activaremos los botones correspondientes.
Ahora, para ejecutar la lógica el usuario loggeado es el mismo que el creador del contenido, deberemos comparar la propiedad que representa al usuario en ambas secciones de código. Para ello, será necesario decodificar un JWT desde JavaScript, con lo que podremos leer las propiedades del usuario que ha iniciado sesión y compararlas con las del usuario que ha creado el contenido. De manera específica, nosotros compararemos la propiedad id del usuario, pero tú puedes tener otro nombre de propiedad como userName.
Debido a lo anterior, para dar permiso de borrado desde JavaScript deberás asegurarte de que el JWT de un usuario y las propiedades de un contenido tengan alguna propiedad en común. Si no es así, te aconsejamos programar esta propiedad (en nuestro caso se llama userId).
A continuación, te mostramos cómo creamos una función para obtener el JWT:
getLoggedUser ( ) {
return localStorage.getItem («jwt») || null;
}
Después de crear esta función, la podremos utilizar desde otra pieza para guardar este acceso al JWT. Para ello, hemos decidido crear otro método que se llama handleDeleteButton. A continuación, te mostramos cómo llamamos a la función anterior desde este método:
handleDeleteButton ( ) {
const loggedUser = signupService.getLoggedUser ( );
Como te hemos contado antes, en esta función deberemos declarar la lógica para dar permiso de borrado desde JavaScript. Es decir, crear un condicional que diga que, si las propiedades tienen el mismo valor, un botón de borrado aparecerá en la pantalla del usuario.
Ahora, te mostramos cómo planeamos los pasos necesarios a ejecutar en esta función, usando una manera de aprender a programar con comentarios.
handleDeleteButton ( ) {
const loggedUserToken = signupService.getLoggedUser ( );
if (loggedUserToken) {
//comprobamos token
//comprobamos si el id de usuario loggeado es el mismo que el id del creador
// pintamos botón de borrado
}
Para aprender cómo crear este botón y hacer que el contenido se borre cuando el usuario haga clic en él, te aconsejamos leer nuestros posts sobre crear un botón para borrar contenido en frontend y método para borrar contenido en frontend.
¿Cuál es el siguiente paso?
Ahora que sabes cómo dar permiso de borrado desde JavaScript para que tus usuarios puedan eliminar el contenido que han creado, ¡te invitamos a probar este conocimiento en tus propios proyectos! Para seguir aprendiendo sobre la creación y desarrollo de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva ideal para ti. ¿A qué esperas para dar el siguiente paso en tu aprendizaje? ¡Solicita ya más información!
