A la hora de crear una aplicación web, hay muchos momentos en los que tomamos decisiones basadas en lo que facilita la experiencia de usuario. Una de estas decisiones es hacer que, si un usuario ya ha iniciado sesión, no deba volver a hacerlo cada vez que hace refresh en nuestra aplicación. Para ello, debemos guardar su inicio de sesión. En este post, te enseñaremos cómo guardar login en React para aplicarlo en tus proyectos.
¿Qué es guardar login en React?
Cuando hablamos de guardar login en React, nos referimos a hacer que nuestra aplicación recuerde que el usuario ha iniciado sesión. Este no es el comportamiento por defecto de una aplicación. ¿Por qué? Supongamos que tenemos una aplicación que simula Twitter. Esta aplicación abre en la página de login que hemos creado en nuestro post sobre crear una página de login en React. Allí, hemos decidido controlar login en React para definir que la página arranca con un estado isLogged:false. Entonces, el usuario usa sus credenciales para entrar a la aplicación. En ese momento, el estado isLogged pasa a ser true.
Ahora, supongamos que el usuario necesita refrescar la página. ¿A dónde lo llevará esta acción? Nuestra aplicación lo llevará de nuevo a la página de login con estado login:false. Esto se da porque, cada vez que refresca la página, estamos pidiendo de nuevo el HTML de la página al servidor. Este HTML tiene un bundle.js, que no es más que todo el código de nuestro proyecto. Por ello, la aplicación empezará a ejecutarse de nuevo a partir del index, en donde hemos renderizado nuestros componentes. Es decir, el servidor empezará a leer nuestro código desde el inicio. Entonces, como el estado login google reactjs empieza en false, cuando el usuario hace un refresh está realmente saliéndose de su sesión.
Este proceso es muy tedioso para el usuario, pues nadie quiere salirse de su sesión cada vez que ejecuta un refresh. Por ello, es importante guardar login en React. De este modo, haremos que la página recuerde las credenciales del usuario cuando refresque la página.
¿Cómo guardar login en React?
Guardar login en React es, básicamente, guardar algún indicador que diga que, la última vez que el usuario estaba en la aplicación, había iniciado sesión y el estado isLogged era true. Esto hará que la aplicación arranque como si el usuario hubiera iniciado sesión. Para ello, debemos encontrar un lugar en el que guardar este dato.
Para guardar login en React, hay dos opciones: el local storage o el session storage. El problema de guardarlo en el react session storage es que este dato se destruirá cuando cerremos la pestaña. Entonces, aunque puede solucionar el problema del refresh, no guardará la sesión realmente. Por ello, usaremos el local storage, ya que es más permanente.
¿Cómo guardar datos en localstorage React? – Login
El primer paso para guardar login en React es crear una carpeta en la que meter nuestro código. Nosotros hemos creado una carpeta llamada utils dentro de la carpeta src, donde meteremos los archivos que nos permiten crear ciertas herramientas. Ahora, crearemos un archivo llamado storage.js, en el que tendremos un código que oculte la dependencia de local storage. A continuación, añade este código:
/react login session
const storage = {
get (key) {
const value = localstorage.getItem (key);
if (value) {
return null;
}
return JSON.parse (value);
},
set (key, value) {
localStorage.setItem (key, JSON.stringify (value))
},
remove (key) {
localStorage.removeItem (key);
},
clear ( ) {
localStorage.clear ( );
},
};Ahora que tenemos esta abstracción, podemos empezar con el proceso de guardar login en React. Para ello, deberás ir al momento en el que tu API te devuelve un token con el que el usuario accede a la aplicación. Entonces, podrás guardar este token en el localstorage. Para ello, deberás insertar las siguientes líneas de código, en las que remember y credentials son las credenciales del usuario que hemos enviado en nuestro post sobre enviar datos a una API en React.
export const login = ({ remember, …credentials}) => {
return client.post /’auth/login’, credentials).then (response => {
storage.set (‘auth’, response.accessToken);
});
};
Con las anteriores líneas, hemos logrado guardar login en React. Ahora, deberemos recordarlo para que la aplicación empiece con el inicio de sesión ya hecho. Esto lo hacemos en nuestro post sobre cómo recordar login en React.
¿Cuál es el siguiente paso?
Después de leer este post, no solo sabes cómo guardar login en React, sino que también estás más cerca de dominar esta librería de JavaScript para desarrollar tus propias aplicaciones. Ahora, el siguiente paso en tu formación como desarrollador web es aprender sobre otras herramientas. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a desarrollar todo tipo de proyectos con lenguajes de programación como JavaScript, HTML y CSS. Si buscas cambiar tu vida y entrar en un sector de altos sueldos y gran demanda, ¡no dudes en matricularte!
