Toda aplicación web que se basa en perfiles privados debe poner a disposición del usuario dos acciones fundamentales: un login y un logout. Es decir, el usuario debe poder poder iniciar sesión y salirse de su sesión. Por ello, debemos preparar nuestro código para que, al ejecutar estas acciones, los estados internos cambien. En este post, te enseñaremos cómo ejecutar un logout en React para que lo insertes en tus propias aplicaciones.
¿Cómo ejecutar un logout en React?
Para ejecutar un logout en React, deberás pensar en cómo has creado tu login. Para ello, puedes revisar nuestro post sobre ejecutar un login en React. Luego, en nuestro post sobre controlar estado login en React, hemos definido que el concepto de «iniciar sesión» es un estado que podemos manejar en nuestro proyecto. Es decir, ya que la idea de que un usuario esté o no dentro de su sesión es un dato cambiante, podemos considerarlo un estado. Para ello, hemos creado la siguiente línea de código:
const [isLogged, setIsLogged] = useState (isInitiallyLogged)
El valor que pasamos para inicializar nuestro estado es una prop en nuestro componente App. Esta prop la pasamos luego a cada página para que puedan usar la función isInitiallyLogged para definir y cambiar el valor del estado isLogged.
Luego, hemos definido una función llamada handleLogin para hacer que el valor del estado isLogged sea verdadero:
const handleLogin = ( ) => {
setIsLogged (true);
};
Ahora, para ejecutar un logout en React, deberemos definir que el valor del estado isLogged pase a falso. De este modo, todos los accesos que le damos al usuario cuando este estado es verdadero se bloquearán. Entonces, lo primero que haremos será definir una función que controle este valor. Ya que hemos llamado a la función anterior handleLogin, llamaremos a esta handleLogout.
const handleLogout = ( ) => {
setIsLogged (false);
};
Ahora que tenemos esta función, debemos hacerla llegar hasta el botón en el que el usuario hace clic para salir de su sesión. Esto es un poco más complicado que pasar una función de un componente padre a un componente hijo, pues deberemos pasar por varios componentes hasta llegar al botón. Entonces, deberás ir pasando por los pisos habituales de tu proyecto hasta llegar al elemento con el que podrás ejecutar un logout en React.
Como has podido leer en nuestro post sobre comunicar padres a hijos en React, la única manera de pasar un dato o una función de un componente padre a un componente hijo es a través de los props. Entonces, deberás ir al componente padre que renderiza el componente hijo y desde ahí pasarle a este último la prop con la que ejecutarás tu acción. En nuestro caso, hemos pasado la prop onLogout = {handleLogout} a nuestra sección.
Luego, nos dirigimos al archivo donde está escrito nuestro componente hijo y le pasamos la prop onLogout. Allí, tendremos que pasarle esta prop a cada componente en el árbol hasta llegar al botón en el que hace clic el usuario.
Ten presente que también podrías usar el spread en React para pasar todas las propiedades del componente padre (…props). Sin embargo, te recomendamos tener cuidado con este símbolo, pues con él estarás copiando propiedades que puede que no quieras tener en los componentes hijos. Esta estrategia es útil cuando estás haciendo un simple paso de componente a otro, pues el componente intermedio no se preocupará ni utilizará las propiedades que le estamos pasando. Por ello, puedes pasar …props o {…props}. En este caso, es solo el penúltimo componente en el que debe estar la propiedad exacta que utilizaremos.
El último paso para ejecutar un logout en React será pasar la prop onLogout como valor del método onClick. Esto hará que, cuando el usuario le clique en el botón, se ejecutará la función handleLogout, igualada a esta prop. Es decir, el estado isLogged pasará a false.
Ahora, si también quieres ejecutar otras acciones, deberás modificar un poco el proceso. Por ello, te recomendamos leer nuestro post sobre el método logout para borrar token en React.
Al leer este post has aprendido a ejecutar un logout en React y puedes usarlo en tu propia aplicación. Ahora, el siguiente paso para dominar esta y otras herramientas de programación para la web es dedicarte por completo a tu aprendizaje. Por ello, te invitamos al programa de formación intensiva ideal para ti: nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a desarrollar proyectos de programación con herramientas y lenguajes como React, JSX, Babel, JavaScript, CSS y HTML. ¿A qué esperas para inscribirte? ¡Hazlo ya y transforma tu vida!
