Toda aplicación web requiere una comunicación con nuestra API, sea para pedir distintos datos o para enviarlos a procesar. Una de las funciones que tiene esta comunicación es darnos un código de acceso para que el usuario pueda desarrollar acciones dentro de nuestra página web. A este código le llamamos token. En este post, te enseñaremos cómo configurar token con cliente Axios en React para crear un código más eficiente.
¿Cómo funciona un token?
Un token es un tipo de respuesta que podemos recibir de nuestra API cuando se ejecutan diversas acciones. La acción más común que devuelve un token es cuando decidimos enviar datos a una API desde React, por ejemplo, credenciales de acceso. Cuando ejecutamos esta acción, nuestra API nos dará una respuesta según si las credenciales son válidas o no. Cuando no son válidas, nos devolverá un error 401.
Si quieres conocer qué hacer con este error 401, te invitamos a leer nuestros posts sobre controlar error login en React y tratar error con cliente Axios en React.
Cuando las credenciales sí son válidas, la API nos devolverá un objeto con una clave accessToken. Este token o clave es un código único que nos permite darle acceso a la aplicación a nuestros usuarios. Además, un token nos permite ejecutar muchas acciones a lo largo de nuestra aplicación. En nuestro post sobre guardar login en React, hemos guardado este token para poder acceder a él cuando tengamos que hacer diversas peticiones, como la que hicimos para recordar login en React.
Ya que acceder a nuestro token será una acción constante a lo largo de nuestro código, puede volverse tedioso que en cada petición que hagamos tengamos que modificar los servicios, recibir el token, guardarlo y pasarlo en la llamada. Por ello, es más sencillo configurar token con cliente Axios en React para que tengamos una función que ejecuta todo este proceso de forma automática.
¿Cómo configurar token con cliente Axios en React?
Configurar token con cliente Axios en React es realmente configurar una cabecera que podemos usar en todas las llamadas que requieran este token. Para hacer esto, podemos pasar el token a un método y luego configurar axios get token cuando tenga el token. Este proceso lo facilita la librería Axios para React, fundamental cuando queremos hacer llamadas HTTP en nuestro proyecto.
Entonces, para configurar token con cliente Axios en React, iremos al archivo que hemos creado en nuestro post sobre configurar un cliente en Axios. Allí, definiremos una función para declarar la cabecera. Nosotros hemos llamado a esta función setAuthorizationHeader. En esta función pasaremos el token y accederemos a la propiedad defaults.headers.common de nuestra variable client. A esta propiedad le pasaremos la cabecera con el nombre que queramos. Nosotros hemos pasado el string ‘Authorization’, pues estamos definiendo el acceso a nuestra aplicación. El último paso es igualar esta propiedad al valor que deseemos, en nuestro caso el token (bearer token in axios).
export const setAuthorizationHeader = token =>
(client.defaults.headers.common [‘Authorization’] = ‘Bearer ${token}’);
Con las líneas anteriores, hemos creado un método setAuthorizationHeader al que le podemos pasar nuestro token. Cuando hagamos esto, lo que estamos haciendo es que, a todas las llamadas que hagamos a partir de ese momento, le pasaremos la cabecera Authorization. Esta cabecera la piden con frecuencia las API en el formato Bearer ${token} (bearer axios).
Ahora, también podemos crear una función para eliminar esta cabecera. Para ello, debemos hacer un delete de la clave que hemos creado en la función anterior. A continuación, puedes ver el resultado:
export const removeAuthorizationHeader = ( ) => {
delete client.defaults.headers.common [‘Authorization’];
);
Con la creación de estas dos funciones, hemos logrado configurar token con cliente Axios en React y también hemos definido una función para desconfigurarlo. Entonces, una vez tengamos disponible el token dentro de nuestro servicio, podemos insertar la función setAuthorizationToken (response.accessToken). Luego, una vez el usuario haga un log out, podremos usar la función removeAuthorizationHeader.
Al leer este post, no solo has aprendido a configurar token con cliente Axios en React, también has dado un paso hacia ser un desarrollador web. Ahora, para adentrarte en este sector, el siguiente paso es dedicarte por completo a tu aprendizaje. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás todo lo necesario para ser un experto del desarrollo web, desde lenguajes como JavaScript, CSS y HTML, hasta herramientas como React, Babel y webPack. ¿A qué esperas para dar este paso? ¡Matricúlate ahora!
