Tengo una duda sobre cómo administrar la sesión de un usuario en React, por ejemplo en MVC .NET solo haces esto usando el objeto Session (por ejemplo Session["test"] = ""; ), pero obviamente React no puede hacer esto .
Estaba leyendo sobre el uso del estado del componente, supongo que establece el estado en el componente principal y pasa este estado a otros componentes usando accesorios. También vi gente recomendando el uso del localStorage del navegador o cookies, pero no sé si esto es una buena idea o práctica.
¿Hay una mejor manera de administrar las variables de sesión en React que localStorage o cookies?
Evitaría usar el estado del componente, ya que esto podría ser difícil de administrar y propenso a problemas que pueden ser difíciles de solucionar.
Debe usar cookies o localStorage para conservar los datos de sesión de un usuario. También puede usar un cierre como un envoltorio alrededor de su cookie o datos de localStorage .
Aquí hay un ejemplo simple de un cierre de UserProfile de usuario que contendrá el nombre del usuario.
var UserProfile = (function() { var full_name = ""; var getName = function() { return full_name; // Or pull this from cookie/localStorage }; var setName = function(name) { full_name = name; // Also set this in cookie/localStorage }; return { getName: getName, setName: setName } })(); export default UserProfile;Cuando un usuario inicia sesión, puede completar este objeto con el nombre de usuario, la dirección de correo electrónico, etc.
import UserProfile from './UserProfile'; UserProfile.setName("Some Guy");Luego, puede obtener estos datos de cualquier componente de su aplicación cuando sea necesario.
import UserProfile from './UserProfile'; UserProfile.getName();El uso de un cierre mantendrá los datos fuera del espacio de nombres global y hará que sea fácilmente accesible desde cualquier lugar de su aplicación.
Hay un módulo de React llamado react-client-session que hace que el almacenamiento de datos de sesión del lado del cliente sea muy fácil. El repositorio de git está aquí .
Esto se implementa de manera similar al enfoque de cierre en mi otra respuesta , sin embargo, también admite la persistencia utilizando 3 tiendas de persistencia diferentes. El almacén predeterminado es la memoria (no persistente).
Después de la instalación, simplemente configure el tipo de tienda deseado donde monta el componente raíz ...
import ReactSession from 'react-client-session'; ReactSession.setStoreType("localStorage");... y establezca/obtenga pares de valores clave desde cualquier lugar de su aplicación:
import ReactSession from 'react-client-session'; ReactSession.set("username", "Bob"); ReactSession.get("username"); // Returns "Bob"Esta no es la mejor manera de administrar la sesión en reaccionar, puede usar tokens web para cifrar los datos que desea guardar, puede usar varios servicios disponibles, uno popular es JSON web tokens (JWT) con tokens web que puede cerrar sesión después algún tiempo si el cliente no realiza ninguna acción. Y después de crear el token, puede almacenarlo en su almacenamiento local para facilitar el acceso.
jwt.sign({user}, 'secretkey', { expiresIn: '30s' }, (err, token) => { res.json({ token });El objeto de usuario aquí son los datos de usuario que desea mantener en la sesión.
localStorage.setItem('session',JSON.stringify(token));