La autenticación sirve como una barrera protectora para las aplicaciones de software, verificando la identidad de los usuarios y otorgando acceso a los recursos protegidos. Sin embargo, exigir a los usuarios que se autentiquen repetidamente, especialmente dentro de una sola sesión, puede generar frustración, impedir la productividad y arruinar su experiencia general.

Para superar este desafío, puede utilizar cookies y almacenamiento de sesión para conservar los datos de autenticación del usuario y otros datos personalizados. información, lo que permite a los usuarios permanecer autenticados durante una sesión sin la necesidad de una reautenticación constante, en consecuencia, mejorando su experiencia

Gestión de datos de sesión de usuario mediante cookies y almacenamiento de sesión

La gestión de sesiones de usuario es un aspecto crucial de la creación de aplicaciones React robustas y seguras. La gestión adecuada de los datos de la sesión mediante el uso de cookies y el almacenamiento de la sesión garantiza una experiencia de usuario fluida y personalizada, manteniendo las medidas de seguridad necesarias.

Los datos de la sesión de usuario suelen incluir información específica de la sesión actual de un usuario o de su interacción con una aplicación. Estos datos pueden variar según los requisitos y la funcionalidad de la aplicación, pero comúnmente incluyen lo siguiente:

• Información relacionada con la autenticación.
• Preferencias y configuraciones del usuario.
• Actividad e historial del usuario.

Las cookies son archivos de texto que contienen pequeños fragmentos de datos. almacenados por los navegadores web en el dispositivo del usuario. Se utilizan comúnmente para almacenar datos de autenticación y cualquier otra información personalizada del usuario, lo que permite que las aplicaciones web mantengan sesiones de usuario en varias sesiones del navegador.

Por otro lado, almacenamiento de sesión: similar al almacenamiento local— es un mecanismo de almacenamiento del lado del cliente proporcionado por los navegadores modernos. A diferencia de las cookies, se limita a una sesión de navegación específica y solo se puede acceder a ella dentro de la misma pestaña o ventana. El almacenamiento de sesiones ofrece una forma simple y directa de almacenar datos específicos de sesiones para aplicaciones web.

Tanto las cookies como el almacenamiento de la sesión juegan un papel crucial en la gestión de los datos de la sesión del usuario. Las cookies son excelentes en situaciones en las que se requiere la persistencia de datos en varias sesiones. Por el contrario, el almacenamiento de sesiones es ventajoso cuando desea aislar datos dentro de una sola sesión de navegación, proporcionando una opción de almacenamiento liviana y específica.

Ahora, exploremos cómo manejar los datos de la sesión del usuario, centrándonos específicamente en el almacenamiento de información de autenticación mediante cookies y el almacenamiento de la sesión.

Configurar un proyecto de reacción

Para empezar, configurar un proyecto React usando Vite. A continuación, instale estos paquetes en su proyecto.

npm instalar js-cookie reaccionar-router-dom

Idealmente, después de que un usuario inicia sesión y sus credenciales se autentican correctamente mediante una API de autenticación de back-end, Las cookies y el almacenamiento de sesión almacenan tokens de autenticación, identificadores de sesión o cualquier otro dato relevante durante la vida del usuario. sesión.

Estos tokens o identificadores junto con los datos adicionales almacenados en el navegador del usuario son automáticamente incluido en las solicitudes posteriores realizadas al servidor para su verificación antes de que un usuario pueda acceder protegido recursos.

De esta manera, la sesión de un usuario persiste en varias solicitudes, lo que garantiza que interactúen sin problemas con la aplicación sin necesidad de volver a autenticarse para cada solicitud.

Puedes encontrar el código de este proyecto en este repositorio GitHub.

Gestión de datos de sesión de autenticación de usuario mediante cookies

Para demostrar cómo usar las cookies para almacenar la información de autenticación de los usuarios, continúe y cree una nueva componentes/Iniciar sesión.jsx archivo en el origen directorio. Dentro de este archivo, agregue el siguiente código.

1. Realice las siguientes importaciones.

   importar { estado de uso } de'reaccionar';
   importar { usar Navegar } de'reaccionar-enrutador-dom';
   importar Galletas de'cookie js';

2. Cree un componente funcional y agregue elementos JSX para un formulario de inicio de sesión.

   constante Iniciar sesión = () => {
   constante [nombre de usuario, setUsername] = useState('');
   constante [contraseña, establecer contraseña] = useState ('');
   devolver (
   
   
   
    tipo ="texto"
    marcador de posición ="Nombre de usuario"
    valor={nombre de usuario}
    onChange={(e) => setUsername (e.target.value)}
    />
    tipo ="contraseña"
    marcador de posición ="Contraseña"
    valor={contraseña}
    onChange={(e) => setPassword (e.target.value)}
    />
   "entregar">Iniciar sesión</button>
    </form>
    );
   };
   exportarpor defecto Acceso;

Dado que no tenemos una API de back-end para autenticar las credenciales de los usuarios, crearemos una función que verifique los datos ingresados ​​por el usuario en el formulario de inicio de sesión usando las credenciales de usuario de prueba. Dentro del componente funcional, agregue el siguiente código.

constante testAuthData = {
 nombre de usuario: 'prueba',
 contraseña: 'prueba',
 }; 
constante autenticarUsuario = (usuario Contraseña) => {
si (nombre de usuario testAuthData.username && contraseña testAuthData.password) { 
constante datos de usuario = {
 nombre de usuario,
 contraseña,
 };
constante tiempo de caducidad = nuevoFecha(nuevoFecha().obtenerTiempo() + 60000);
 Cookies.set('autor', JSON.stringify (datos de usuario), { caduca: Tiempo de expiración });
devolververdadero;
 }
devolverFALSO;
 };
constante manejarInicio de sesión = (mi) => {
 e.preventDefault();
constante isAuthenticated = autenticarUsuario (nombre de usuario, contraseña);
si (está autenticado) {
 navegar('/protegido');
 } demás {
// Mostrar mensaje de error o realizar otras acciones para la autenticación fallida
 }
 };

Dentro de autenticarUsuario función, comprueba si el nombre de usuario y la contraseña proporcionados coinciden con los datos de autenticación de prueba. Si las credenciales coinciden, crea un datos del usuario objeto con el nombre de usuario y la contraseña. Luego establece un tiempo de caducidad para la cookie y almacena el datos del usuario en una galleta llamada autenticación utilizando el Conjunto de cookies método.

Después de una autenticación exitosa, un usuario redirige a una página protegida ya que está autorizado para acceder a los recursos protegidos. Al almacenar la información de autenticación en una cookie, establece una sesión de usuario activa, lo que permite que las solicitudes posteriores incluyan los detalles de autenticación automáticamente.

Estos datos de sesión de usuario permiten que el código del servidor verifique la identidad del usuario y autorice el acceso a los privilegios sin necesidad de que el usuario se vuelva a autenticar para cada solicitud.

Actualice el archivo App.jsx

Realice cambios en el Aplicación.jsx archivo para manejar el enrutamiento del usuario después de una autenticación exitosa

importar { NavegadorRouter, Ruta, Rutas, useNavegar } de'reaccionar-enrutador-dom';
importar Galletas de'cookie js';
importar Acceso de'./componentes/Iniciar sesión';
constante Página protegida = ({ ...descansar }) => {
constante isAuthenticated = !!Cookies.get('autor');
constante navegar = usarNavegar();
constante handleLogout = () => { 
 Cookies.remove('autor');
 navegar('/acceso'); 
 };
si (! está autenticado) {
 navegar('/acceso'); 
devolvernulo; // Devuelve nulo para evitar renderizar cualquier otra cosa
 }
devolver (



tamaño de fuente: '24px', color: 'azul' }}>¡Hola, mundo!</h1>
margen superior: '10 píxeles' }} onClick={manejarCerrar sesión}>
 Cerrar sesión
 </button>
 </div>
 );
};


constante aplicación = () => {
devolver (


"/protegido/*" elemento={} />
"/acceso" elemento={} />
 </Routes>
 </BrowserRouter>
 );
};
exportarpor defecto aplicación;

El código anterior configura los componentes necesarios y la lógica de enrutamiento. Incluye un botón de cierre de sesión que, al pulsarlo, elimina la cookie de autenticación y redirige al usuario a la página de inicio de sesión.

Además, verifica la presencia de la cookie de autenticación y redirige a los usuarios a la página de inicio de sesión si no está. Sin embargo, si la cookie está presente, el página protegida El componente muestra una página a la que pueden acceder exclusivamente los usuarios autenticados.

Finalmente, ejecute el siguiente comando para activar el servidor de desarrollo para probar la aplicación.

npm ejecutar dev

En su navegador, navegue hasta http://127.0.0.1:5173/logine ingrese las credenciales de autenticación de prueba. Después de iniciar sesión con éxito, se genera una nueva cookie que contiene los datos de la sesión, que incluye la información de autenticación de prueba.

Una vez que la cookie caduca o cuando hace clic en el botón de cierre de sesión, la cookie se elimina. Esta acción finaliza efectivamente la sesión de usuario activa y cierra su sesión.

Almacenamiento de datos de autenticación de usuario mediante almacenamiento de sesión

Tanto el almacenamiento de sesión como las cookies funcionan de manera similar. Para almacenar la información necesaria en el almacenamiento de la sesión del navegador, puede utilizar el sessionStorage.setItem método.

 sesiónAlmacenamiento.setItem('autor', JSON.stringify (datos de usuario));

Al agregar la declaración anterior dentro del autenticarUsuario función en el Acceso componente, puede almacenar los datos de autenticación del usuario en el almacenamiento de la sesión del navegador.

Exploración de casos de uso adicionales para cookies y almacenamiento de sesiones

Esta guía destacó cómo usar las cookies y el almacenamiento de sesiones para almacenar las credenciales de autenticación de los usuarios. No obstante, las cookies y el almacenamiento de sesiones ofrecen una gama más amplia de capacidades más allá del almacenamiento de información de autenticación.

Al aprovechar estas funciones, puede administrar datos de sesión adicionales, lo que lleva a una experiencia de usuario más segura y personalizada.