L'authentification sert de barrière de protection pour les applications logicielles, vérifiant l'identité des utilisateurs et accordant l'accès aux ressources protégées. Cependant, obliger les utilisateurs à s'authentifier à plusieurs reprises, en particulier au cours d'une même session, peut entraîner de la frustration, entraver la productivité et ruiner leur expérience globale.

Pour surmonter ce défi, vous pouvez utiliser des cookies et le stockage de session pour conserver les données d'authentification de l'utilisateur et d'autres informations personnalisées. informations - permettant aux utilisateurs de rester authentifiés tout au long d'une session sans avoir besoin d'une réauthentification constante, améliorant ainsi leur expérience.

Gestion des données de session utilisateur à l'aide de cookies et de stockage de session

La gestion des sessions utilisateur est un aspect crucial de la création d'applications React robustes et sécurisées. La bonne gestion des données de session à l'aide de cookies et de stockage de session garantit une expérience utilisateur fluide et personnalisée tout en maintenant les mesures de sécurité nécessaires.

Les données de session utilisateur incluent généralement des informations spécifiques à la session actuelle d'un utilisateur ou à son interaction avec une application. Ces données peuvent varier en fonction des exigences et des fonctionnalités de l'application, mais comprennent généralement les éléments suivants :

• Informations relatives à l'authentification.
• Préférences et paramètres de l'utilisateur.
• Activité et historique des utilisateurs.

Les cookies sont des fichiers texte qui contiennent de petits morceaux de données stockées par les navigateurs Web sur l'appareil de l'utilisateur. Ils sont couramment utilisés pour stocker des données d'authentification et toute autre information utilisateur personnalisée, permettant aux applications Web de maintenir des sessions utilisateur sur plusieurs sessions de navigateur.

D'autre part, stockage de session—similaire au stockage local— est un mécanisme de stockage côté client fourni par les navigateurs modernes. Contrairement aux cookies, il est limité à une session de navigation spécifique et accessible uniquement dans le même onglet ou la même fenêtre. Le stockage de session offre un moyen simple et direct de stocker des données spécifiques à la session pour les applications Web.

Les cookies et le stockage de session jouent un rôle crucial dans la gestion des données de session des utilisateurs. Les cookies sont parfaits dans les situations où la persistance des données sur plusieurs sessions est requise. En revanche, le stockage de session est avantageux lorsque vous souhaitez isoler des données au sein d'une seule session de navigation, offrant une option de stockage légère et spécifique.

Voyons maintenant comment gérer les données de session utilisateur, en nous concentrant spécifiquement sur le stockage des informations d'authentification à l'aide de cookies et de stockage de session.

Configurer un projet React

Pour commencer, mettre en place un projet React avec Vite. Ensuite, installez ces packages dans votre projet.

npm installer js-cookie réagir-routeur-dom

Idéalement, une fois qu'un utilisateur s'est connecté et que ses informations d'identification ont été authentifiées avec succès par une API d'authentification backend, les cookies et le stockage de session stockent les jetons d'authentification, les identifiants de session ou toute autre donnée pertinente pendant la visite de l'utilisateur. session.

Ces jetons ou identifiants ainsi que les données supplémentaires stockées dans le navigateur de l'utilisateur sont automatiquement inclus dans les requêtes ultérieures adressées au serveur pour vérification avant qu'un utilisateur puisse accéder ressources.

De cette façon, la session d'un utilisateur persiste sur plusieurs requêtes, ce qui garantit qu'il interagit de manière transparente avec l'application sans avoir à s'authentifier à nouveau pour chaque requête.

Vous pouvez trouver le code de ce projet dans ce Référentiel GitHub.

Gestion des données de session d'authentification des utilisateurs à l'aide de cookies

Pour montrer comment utiliser les cookies pour stocker les informations d'authentification des utilisateurs, continuez et créez un nouveau composants/Login.jsx dossier dans le src annuaire. Dans ce fichier, ajoutez le code suivant.

1. Effectuez les importations suivantes.

   importer { useState } depuis'réagir';
   importer { useNavigate } depuis'réagir-routeur-dom';
   importer Biscuits depuis'js-cookie';

2. Créez un composant fonctionnel et ajoutez des éléments JSX pour un formulaire de connexion.

   constante Connexion = () => {
   constante [nom d'utilisateur, setUsername] = useState('');
   constante [mot de passe, setPassword] = useState('');
   retour (
   
   
   
    taper="texte"
    espace réservé="Nom d'utilisateur"
    valeur={nom d'utilisateur}
    onChange={(e) => setUsername (e.target.value)}
    />
    taper="mot de passe"
    espace réservé="Mot de passe"
    valeur={mot de passe}
    onChange={(e) => setPassword (e.target.value)}
    />
   "soumettre">Connexion</button>
    </form>
    );
   };
   exporterdéfaut Connexion;

Étant donné que nous n'avons pas d'API backend pour authentifier les informations d'identification de l'utilisateur, nous allons créer une fonction qui vérifie les données saisies par l'utilisateur dans le formulaire de connexion à l'aide des informations d'identification de l'utilisateur de test. Dans le composant fonctionnel, ajoutez le code suivant.

constante testAuthData = {
 nom d'utilisateur: 'test',
 mot de passe: 'test',
 }; 
constante authentifier l'utilisateur = (Identifiant Mot de passe) => {
si (nom d'utilisateur testAuthData.nom d'utilisateur && mot de passe testAuthData.password) { 
constante donnéesutilisateur = {
 nom d'utilisateur,
 mot de passe,
 };
constante heured'expiration = nouveauDate(nouveauDate().getTime() + 60000);
 Cookies.set('authentique', JSON.stringify (donnéesutilisateur), { expire: date d'expiration });
retourvrai;
 }
retourFAUX;
 };
constante handleLogin = (e) => {
 e.preventDefault();
constante isAuthenticated = authenticationUser (nom d'utilisateur, mot de passe) ;
si (est authentifié) {
 naviguer('/protégé');
 } autre {
// Afficher le message d'erreur ou effectuer d'autres actions en cas d'échec de l'authentification
 }
 };

À l'intérieur de authentifier l'utilisateur fonction, il vérifie si le nom d'utilisateur et le mot de passe fournis correspondent aux données d'authentification du test. Si les identifiants correspondent, il crée un données d'utilisateur objet avec le nom d'utilisateur et le mot de passe. Il définit ensuite un délai d'expiration pour le cookie et stocke le données d'utilisateur dans un cookie nommé authentification en utilisant le Cookies.set méthode.

Après une authentification réussie, un utilisateur est redirigé vers une page protégée puisqu'il est autorisé à accéder aux ressources protégées. En stockant les informations d'authentification dans un cookie, vous établissez une session utilisateur active, permettant aux demandes ultérieures d'inclure automatiquement les détails d'authentification.

Ces données de session utilisateur permettent au code serveur de vérifier l'identité de l'utilisateur et d'autoriser l'accès aux privilèges sans exiger que l'utilisateur se ré-authentifie à chaque requête.

Mettre à jour le fichier App.jsx

Apporter des modifications au App.jsx fichier pour gérer le routage des utilisateurs après une authentification réussie

importer { NavigateurRouter, Route, Routes, useNavigate } depuis'réagir-routeur-dom';
importer Biscuits depuis'js-cookie';
importer Connexion depuis'./composants/Connexion';
constante PageProtégée = ({ ...repos }) => {
constante isAuthenticated = !!Cookies.get('authentique');
constante naviguer = utiliserNaviguer();
constante handleLogout = () => { 
 Cookies.remove('authentique');
 naviguer('/connexion'); 
 };
si (!isAuthenticated) {
 naviguer('/connexion'); 
retournul; // Renvoie null pour empêcher le rendu de quoi que ce soit d'autre
 }
retour (



taille de police: '24px', couleur: 'bleu' }}>Bonjour, le monde !</h1>
marginTop: '10px' }} onClick={handleLogout}>
 Se déconnecter
 </button>
 </div>
 );
};


constante Application = () => {
retour (


"/protégé/*" élément={} />
"/connexion" élément={} />
 </Routes>
 </BrowserRouter>
 );
};
exporterdéfaut application ;

Le code ci-dessus configure les composants nécessaires et la logique de routage. Il comprend un bouton de déconnexion qui, lorsqu'il est pressé, supprime le cookie d'authentification et redirige l'utilisateur vers la page de connexion.

De plus, il vérifie la présence du cookie d'authentification et redirige les utilisateurs vers la page de connexion s'il est absent. Cependant, si le cookie est présent, le Page protégée Le composant affiche une page exclusivement accessible aux utilisateurs authentifiés.

Enfin, exécutez la commande ci-dessous pour lancer le serveur de développement afin de tester l'application.

npm run dev

Sur votre navigateur, accédez à http://127.0.0.1:5173/login, et entrez les informations d'authentification de test. Après une connexion réussie, un nouveau cookie est généré contenant les données de session, qui incluent les informations d'authentification de test.

Une fois le cookie expiré ou lorsque vous cliquez sur le bouton de déconnexion, le cookie est supprimé. Cette action met effectivement fin à la session utilisateur active et vous déconnecte.

Stockage des données d'authentification utilisateur à l'aide du stockage de session

Le stockage de session et les cookies fonctionnent de la même manière. Pour stocker les informations nécessaires dans la mémoire de session du navigateur, vous pouvez utiliser le sessionStorage.setItemsessionStorage.setItem méthode.

 sessionStorage.setItem('authentique', JSON.stringify (userData));

En ajoutant la déclaration ci-dessus à l'intérieur du authentifier l'utilisateur fonction dans le Connexion composant, vous pouvez stocker les données d'authentification de l'utilisateur dans le stockage de session du navigateur.

Explorer des cas d'utilisation supplémentaires pour les cookies et le stockage de session

Ce guide a expliqué comment utiliser les cookies et le stockage de session pour stocker les identifiants d'authentification des utilisateurs. Néanmoins, les cookies et le stockage de session offrent un plus large éventail de fonctionnalités au-delà du stockage des informations d'authentification.

En tirant parti de ces fonctionnalités, vous pouvez gérer des données de session supplémentaires, ce qui conduit à une expérience utilisateur plus sécurisée et personnalisée.