En términos de desarrollo web y peticiones HTTP, las cabeceras son elementos que nos permiten guardar y contener información importante que necesitaremos al ejecutar acciones en distintos momentos de nuestro proyecto. En este post, te enseñaremos exactamente qué es la cabecera authorization bearer y cómo funciona para darle determinados accesos o permisos a los usuarios de nuestra aplicación.
La cabecera authorization bearer es un tipo de header de una petición HTTP que carga con información relevante al tipo de usuario con el objetivo de darle autoridad para ejecutar la acción requerida en la petición. En este orden de ideas, la cabecera authorization bearer suele contener el JWT o JSON Web Token que se genera cuando el usuario inicia sesión.
Para conocer más sobre los JWT, te invitamos a leer nuestros artículos sobre qué es JSON Web Token y cómo usar el JWT.
La cabecera authorization bearer funciona como una propiedad de la petición HTTP generada. En el caso de las peticiones HTTP con fetch, esta cabecera está al mismo nivel que el método. En nuestro post sobre el método para borrar contenido en frontend, te hemos mostrado cómo se ven estas dos propiedades dentro de nuestro método deleteContent.
A continuación, te mostramos estas líneas de código para que veas cómo se declara la cabecera authorization bearer en el contexto de una petición con fetch:
async deleteContent (contentId) {
const url = ‘http://localhost:8000/api/contents/${content.id};
let response;
try {
response = await fetch (url, {
method: ‘DELETE’,
headers: {
‘Authorization’: ‘Bearer’ + signupService.getLoggedUser ( )
});
} catch (error) {
throw new Error (‘No he podido borrar el contenido’);
}
if (!response.ok) {
throw new Error (‘Contenido no encontrado’);
}
},
Como puedes ver, en una petición HTTP con fetch, al igual que existe la propiedad method que nos permite declarar el tipo de petición (DELETE, POST, GET, etc.), existe una propiedad llamada headers. En esta es donde insertaremos las cabeceras de nuestra petición.
Entonces, la cabecera authorization bearer es tan solo una de las cabeceras posibles bajo la propiedad headers. Para que esta funcione, debemos declarar la palabra clave Authorization y la igualamos a la palabra clave bearer más el comando que nos lleve al JWT del usuario. En el caso de las anteriores líneas de código, a este elemento se accede con la función getLoggedUser de la instancia de clase signupService.
Por todo lo anterior, para declarar la cabecera authorization bearer usamos la siguiente línea de código dentro del objeto de headers:
‘Authorization’: ‘Bearer’ + signupService.getLoggedUser ( )
Ten muy presente que la palabra clave bearer es fundamental para que este tipo de cabecera funcione. El motivo de esto es que se trata de una convención en toda petición HTTP hecha a un endpoint que requiere autenticación. Gracias a ella y al comando que lleva al JWT, tu petición HTTP devolverá un código de estado 200 en vez de un 401 (Unauthorized). ¡No olvides esta palabra!
La cabecera authorization bearer se usa como un esquema de autenticación en peticiones HTTP. Para conocer más sobre esta forma de asegurar tus tokens, te recomendamos leer el artículo bearer authentication en swagger.io.
¿Quieres seguir aprendiendo?
Tras leer este post, sabes exactamente qué es y cómo funciona la cabecera authorization bearer, un elemento fundamental en la validación de usuario y permisos en tus proyectos web. Sin embargo, ¡todavía queda mucho por aprender sobre este tipo de proyectos! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás los conceptos, lenguajes y herramientas fundamentales para la creación web. ¿Quieres seguir aprendiendo con nosotros y cambiar tu vida? ¡No lo dudes más e inscríbete para convertirte en un experto!
