El método logout para borrar token en React es una forma de ejecutar acciones importantes en el proceso de salir de la sesión. Esta es una de las dos acciones más importantes en la creación de una aplicación: el inicio de sesión o login y la salida de sesión o logout. Por ello, aprender a programar estas acciones es fundamental. En este post, te enseñaremos a usar el método logout para borrar token en React y, así, eliminar los datos del usuario de tu código.
¿Qué es el método logout para borrar token en React?
El método logout para borrar token en React es una función que podemos crear para hacer que, cuando se ejecute un logout por parte del usuario, también se elimine de nuestros almacenamientos el token que le da acceso a la aplicación. Recuerda que, como puedes leer en nuestro post sobre configurar token con cliente Axios en React, un token es un código único o llave que nos devuelve nuestra API cuando las credenciales de un usuario son correctas.
Una vez obtenido, podemos guardar este token en nuestro servidor y en nuestro almacenamiento local para mantener el inicio de sesión del usuario. Esto permitirá que nuestra aplicación sepa que ya hubo un inicio de sesión y abra los distintos accesos. Además, nos permitirá evitar que, cuando el usuario haga una recarga o cierre la pestaña de navegación, se cierre su sesión.
¿Cómo funciona el método logout para borrar token en React?
El método logout para borrar token en React funciona del modo exactamente contrario al método login que hemos creado en nuestro post sobre guardar login en React. Allí, hemos creado una función en la que pasamos las credenciales de nuestro usuario, obtenemos un token y lo guardamos dentro de nuestro storage. Este método lo hemos escrito en un archivo nuevo que llamamos service.js, donde escribiremos todo el código relacionado al servicio. A continuación, puedes ver lo que tenemos en este archivo:
import client, {setAuthorizationHeader} from ‘../’;
import storage from ‘../../utils/storage’;
export const login = {(remember, …credentials })
return client.post /’auth/login’, credentials).then (response => {
setAuthorizationHeader (accesToken);
storage.set (‘auth’, response.accessToken);
});
};
En las líneas de código anteriores, hemos guardado el token en el cliente de Axios y en el local storage. Ahora, deberemos crear un método logout para borrar token en React de un modo similar. Es decir, eliminaremos el token del cliente Axios para que las siguientes peticiones no lleven esta cabecera. Además, eliminaremos el token del local storage para que, cuando el usuario vuelva a la aplicación, no tenga iniciada su sesión.
Te recomendamos que, cuando estés creando dos métodos opuestos que ejecuten acciones similares, uses la misma lógica en ambos métodos. Es decir, que sean métodos con elementos y longitudes similares.
A continuación, te presentamos las líneas de código con las que hemos creado un método logout para borrar token en React. Ten presente que aquí no necesitamos pasar parámetros. Además, no existe ningún método dentro del cliente para eliminar el token, como sí existe el client.post.
export const logout = ( ) => {
return Promise.resolve ( ).then => {
removeAuthorizationHeader ( )
storage.remove (‘auth’)
})
}
Nota que en las anteriores líneas de código hemos devuelto una promesa para hacer que esta función sea análoga a la función login. Esta promesa nos devolverá undefined, porque no le estamos pasando nada. En realidad, no nos interesa el valor de retorno. Lo que nos interesa es que nuestro método logout haga lo mismo que el login, pero a la inversa.
Ten en cuenta que las funciones setAuthorizationHeader y removeAuthorizationHeader no son funciones propias de React, las hemos creado en nuestro post sobre configurar token con cliente Axios en React.
¿Te animas a seguir aprendiendo?
Ahora que sabes qué es y cómo funciona el método logout para borrar token en React, estás más cerca de dominar esta poderosa librería de JavaScript. Sin embargo, todavía queda mucho por aprender para dominar el mundo del desarrollo web. Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en donde aprenderás a dominar lenguajes de programación como JavaScript, HTML, CSS y JSX. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ya y cambia tu vida!
