Cómo persistir a un usuario que inició sesión en React

Si realiza una búsqueda rápida en Google para mantener un usuario registrado en React (o mantener a un usuario conectado en React), no obtendrá muchos resultados sencillos. Realmente no hay ejemplos fáciles de seguir sobre cómo lograr esto. Así que decidí que tenía que escribir esa sencilla guía.

Es posible que haya hecho una búsqueda sobre esto y haya visto la palabra localStorage . Sí, usaremos localStorage, pero le mostraré exactamente cómo se hace.

Algunas notas sobre localStorage.

  1. localStorage es la base de datos del navegador. Los datos se almacenan dentro de su navegador en la memoria de su computadora.
  2. localStorage es específico de un origen. En otras palabras, el localStorage de un sitio web no puede ser accedido por otro.

Configuración inicial

Empecemos. Implementé un servidor express simple en Heroku para usarlo al probar esta aplicación.

  1. Cree una nueva aplicación React y diríjase al componente.
  2. Instale axios usando npm install axiose impórtelo dentro
  3. A continuación, cree un formulario de inicio de sesión simple que acepte un nombre de usuario y una contraseña.
import React, { useState } from "react"; import axios from "axios"; const App = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [user, setUser] = useState() const handleSubmit = async e => { }; // if there's a user show the message below if (user) { return {user.name} is loggged in ; } // if there's no user, show the login form return (  Username:   setUsername(target.value)} /> password:   setPassword(target.value)} /> Login  ); }; export default App; 

Como puede ver, hemos definido una función handleSubmit asincrónica para procesar la solicitud de inicio de sesión. También hemos definido un condicional que muestra un mensaje de nombre de usuario está conectado si tenemos un usuario, y el formulario de inicio de sesión si no tenemos un usuario.

A continuación, completemos la función. Esta función funcionará en los siguientes pasos:

  1. Envíe los datos de inicio de sesión al servidor.
  2. Si la solicitud tiene éxito (async-await), almacene la información del usuario en localStorage y establezca el estado del usuario.

Manejar el evento de inicio de sesión

Definamos el controlador de eventos handleSubmit .

const handleSubmit = async e => { e.preventDefault(); const user = { username, password }; // send the username and password to the server const response = await axios.post( "//blogservice.herokuapp.com/api/login", user ); // set the state of the user setUser(response.data) // store the user in localStorage localStorage.setItem('user', response.data) console.log(response.data) }; 

Nota: Utilice un bloque tryCatch para manejar errores en funciones asíncronas.

Ahora que nuestra función está lista, puede ejecutar npm start para probar su aplicación. Inicie sesión con el nombre de usuario : usuario2, contraseña : contraseña.

Debería recibir lo siguiente como respuesta. El ID de usuario , el token y el nombre de usuario

Compruebe si un usuario ha iniciado sesión anteriormente

A continuación, queremos una forma de comprobar si hay un usuario conectado cada vez que se carga la aplicación. Para eso, usamos el gancho useEffect.

 useEffect(() => { const loggedInUser = localStorage.getItem("user"); if (loggedInUser) { const foundUser = JSON.parse(loggedInUser); setUser(foundUser); } }, []); 

Recuerde usar una matriz de dependencia vacía en su gancho useEffect para que verifique si hay un usuario conectado la primera vez que se carga la aplicación.

Ahora nuestra aplicación debería funcionar perfectamente. Obtenemos la página siguiente después de que un usuario ha iniciado sesión por primera vez y se almacenan sus detalles. Si actualiza la página, verá que nuestro usuario permanece conectado y la página de inicio de sesión continúa mostrándose.

Como consejo adicional, aquí se explica cómo implementar el cierre de sesión.

Implementación de la función de cierre de sesión

Para cerrar la sesión, simplemente vaciamos el estado del usuario y lo eliminamos de localStorage.

Implementemos eso.

Primero, creamos un botón de cierre de sesión

logout 

Luego, creamos la función de cierre de sesión.

const handleLogout = () => { setUser({}); setUsername(""); setPassword(""); localStorage.clear(); }; 

Y eso es todo, hemos terminado.

Aquí hay un enlace a la esencia completa en GitHub. Puedes seguirme allí para obtener más actualizaciones.