Authenticatie dient als een beschermende barrière voor softwaretoepassingen, het verifiëren van de identiteit van gebruikers en het verlenen van toegang tot beschermde bronnen. Gebruikers verplichten zich echter herhaaldelijk te authenticeren, vooral binnen een enkele sessie, kan leiden tot frustratie, de productiviteit belemmeren en hun algehele ervaring verpesten.

Om deze uitdaging te overwinnen, kunt u cookies en sessieopslag gebruiken om gebruikersauthenticatiegegevens en andere persoonlijke gegevens vast te houden informatie - waardoor gebruikers gedurende een sessie geverifieerd kunnen blijven zonder de noodzaak van constante herauthenticatie, dus verbetering hun ervaring.

Gebruikerssessiegegevens beheren met behulp van cookies en sessieopslag

Het beheer van gebruikerssessies is een cruciaal aspect bij het bouwen van robuuste en veilige React-applicaties. Het correct beheren van sessiegegevens met behulp van cookies en sessieopslag zorgt voor een vlotte en gepersonaliseerde gebruikerservaring met behoud van de nodige veiligheidsmaatregelen.

Gegevens van gebruikerssessies bevatten doorgaans informatie die specifiek is voor de huidige sessie of interactie van een gebruiker met een toepassing. Deze gegevens kunnen variëren, afhankelijk van de vereisten en functionaliteit van de toepassing, maar omvatten gewoonlijk het volgende:

• Authenticatie-gerelateerde informatie.
• Gebruikersvoorkeuren en instellingen.
• Gebruikersactiviteit en geschiedenis.

Cookies zijn tekstbestanden die kleine stukjes data bevatten opgeslagen door webbrowsers op het apparaat van de gebruiker. Ze worden vaak gebruikt om authenticatiegegevens en andere gepersonaliseerde gebruikersinformatie op te slaan, waardoor webapplicaties gebruikerssessies over meerdere browsersessies kunnen onderhouden.

Aan de andere kant, sessieopslag—vergelijkbaar met lokale opslag—is een opslagmechanisme aan de clientzijde dat wordt geleverd door moderne browsers. In tegenstelling tot cookies is het beperkt tot een specifieke browsersessie en alleen toegankelijk binnen hetzelfde tabblad of hetzelfde venster. Sessieopslag biedt een eenvoudige en ongecompliceerde manier om sessiespecifieke gegevens voor webtoepassingen op te slaan.

Zowel cookies als sessieopslag spelen een cruciale rol bij het beheer van gebruikerssessiegegevens. Cookies zijn geweldig in situaties waarin gegevenspersistentie over meerdere sessies vereist is. Sessieopslag daarentegen is voordelig wanneer u gegevens binnen een enkele browsersessie wilt isoleren, omdat het een lichtgewicht en specifieke opslagoptie biedt.

Laten we nu eens kijken hoe we gebruikerssessiegegevens kunnen verwerken, waarbij we ons specifiek richten op het opslaan van authenticatie-informatie met behulp van cookies en sessieopslag.

Zet een React-project op

Starten, een React-project opzetten met Vite. Installeer vervolgens deze pakketten in uw project.

npm install js-cookie react-router-dom

Idealiter, nadat een gebruiker zich heeft aangemeld en hun inloggegevens met succes zijn geverifieerd door een backend-authenticatie-API, cookies en sessieopslag slaan authenticatietokens, sessie-ID's of andere relevante gegevens op tijdens de sessie van de gebruiker sessie.

Deze tokens of identifiers worden samen met de aanvullende gegevens die zijn opgeslagen in de browser van de gebruiker automatisch opgenomen in latere verzoeken aan de server voor verificatie voordat een gebruiker beveiligde toegang krijgt bronnen.

Op deze manier blijft de sessie van een gebruiker bij meerdere verzoeken bestaan, zodat ze naadloos kunnen communiceren met de applicatie zonder dat ze zich voor elk verzoek opnieuw hoeven te verifiëren.

U kunt de code van dit project hierin vinden GitHub-opslagplaats.

Sessiegegevens voor gebruikersauthenticatie beheren met behulp van cookies

Om te demonstreren hoe u cookies kunt gebruiken om de authenticatie-informatie van gebruikers op te slaan, kunt u doorgaan en een nieuw componenten/Login.jsx bestand in de src map. Voeg in dit bestand de volgende code toe.

1. Voer de volgende invoer uit.

   importeren { useState } van'Reageer';
   importeren { gebruik Navigeren } van'reageren-router-dom';
   importeren Koekjes van'js-cookie';

2. Maak een functionele component en voeg JSX-elementen toe voor een inlogformulier.

   const Inloggen = () => {
   const [gebruikersnaam, setgebruikersnaam] = useState('');
   const [wachtwoord, setPassword] = useState('');
   opbrengst (
   
   
   
    type="tekst"
    tijdelijke aanduiding="Gebruikersnaam"
    waarde={gebruikersnaam}
    onChange={(e) => setUsername (e.target.value)}
    />
    type="wachtwoord"
    tijdelijke aanduiding="Wachtwoord"
    waarde={wachtwoord}
    onChange={(e) => setPassword (e.target.value)}
    />
   "indienen">Inloggen</button>
    </form>
    );
   };
   exporterenstandaard Log in;

Aangezien we geen backend-API hebben om gebruikersreferenties te verifiëren, maken we een functie die de gegevens verifieert die door de gebruiker in het aanmeldingsformulier zijn ingevoerd met behulp van testgebruikersreferenties. Voeg binnen de functionele component de volgende code toe.

const testAuthData = {
 gebruikersnaam: 'test',
 wachtwoord: 'test',
 }; 
const authenticateUser = (gebruikersnaam wachtwoord) => {
als (gebruikersnaam testAuthData.gebruikersnaam && wachtwoord testAuthData.wachtwoord) { 
const gebruikersgegevens = {
 gebruikersnaam,
 wachtwoord,
 };
const vervaltijd = nieuwDatum(nieuwDatum().getTime() + 60000);
 Cookies.set('authenticatie', JSON.stringify (gebruikersgegevens), { verloopt: vervaltijd });
opbrengstWAAR;
 }
opbrengstvals;
 };
const handleLogin = (e) => {
 e.preventDefault();
const isAuthenticated = authenticateUser (gebruikersnaam, wachtwoord);
als (is geverifieerd) {
 navigeren('/beschermd');
 } anders {
// Toon foutmelding of voer andere acties uit voor mislukte authenticatie
 }
 };

Binnen in de authenticateGebruiker functie, controleert het of de verstrekte gebruikersnaam en het wachtwoord overeenkomen met de testauthenticatiegegevens. Als de inloggegevens overeenkomen, wordt er een gebruikersgegevens object met gebruikersnaam en wachtwoord. Vervolgens stelt het een vervaltijd in voor de cookie en slaat het op gebruikersgegevens in een koekje met de naam autoriseren de... gebruiken Cookies.set methode.

Na succesvolle authenticatie wordt een gebruiker omgeleid naar een beveiligde pagina, aangezien deze gemachtigd is om toegang te krijgen tot beveiligde bronnen. Door de authenticatie-informatie in een cookie op te slaan, brengt u een actieve gebruikerssessie tot stand, waardoor volgende verzoeken automatisch de authenticatiegegevens kunnen opnemen.

Met deze gebruikerssessiegegevens kan de servercode de identiteit van de gebruiker verifiëren en toegang tot privileges autoriseren zonder dat de gebruiker zich voor elk verzoek opnieuw hoeft te authenticeren.

Werk het App.jsx-bestand bij

Breng wijzigingen aan in de App.jsx bestand om gebruikersroutering af te handelen na succesvolle authenticatie

importeren { BrowserRouter, Route, Routes, gebruik Navigeren } van'reageren-router-dom';
importeren Koekjes van'js-cookie';
importeren Log in van'./componenten/Inloggen';
const BeveiligdePagina = ({ ...rest }) => {
const isAuthenticated = !!Cookies.get('authenticatie');
const navigeren = gebruikNavigeren();
const handleLogout = () => { 
 Cookies.verwijderen('authenticatie');
 navigeren('/Log in'); 
 };
als (!is geverifieerd) {
 navigeren('/Log in'); 
opbrengstnul; // Retourneer null om te voorkomen dat iets anders wordt weergegeven
 }
opbrengst (



lettertypegrootte: '24px', kleur: 'blauw' }}>Hallo, wereld!</h1>
margeTop: '10px' }} onClick={handleLogout}>
 Uitloggen
 </button>
 </div>
 );
};


const App= () => {
opbrengst (


"/beschermd/*" element={} />
"/Log in" element={} />
 </Routes>
 </BrowserRouter>
 );
};
exporterenstandaard App;

De bovenstaande code stelt de benodigde componenten en de routeringslogica in. Het bevat een uitlogknop die, wanneer erop wordt gedrukt, de authenticatiecookie verwijdert en de gebruiker omleidt naar de inlogpagina.

Bovendien verifieert het de aanwezigheid van de authenticatiecookie en leidt het gebruikers door naar de inlogpagina als deze afwezig is. Als de cookie echter aanwezig is, wordt de Beschermde pagina component geeft een pagina weer die exclusief toegankelijk is voor geverifieerde gebruikers.

Voer ten slotte de onderstaande opdracht uit om de ontwikkelingsserver te laten draaien om de toepassing te testen.

npm run dev

Navigeer in uw browser naar http://127.0.0.1:5173/login, en voer de testauthenticatiereferenties in. Nadat u succesvol bent ingelogd, wordt er een nieuwe cookie gegenereerd met daarin de sessiegegevens, waaronder de testauthenticatie-informatie.

Zodra de cookie verloopt of wanneer u op de uitlogknop klikt, wordt de cookie verwijderd. Deze actie beëindigt effectief de actieve gebruikerssessie en logt u uit.

Gebruikersauthenticatiegegevens opslaan met behulp van sessieopslag

Zowel sessieopslag als cookies werken op dezelfde manier. Om de benodigde informatie op te slaan in de sessieopslag van de browser, kunt u de sessionStorage.setItem methode.

 sessionStorage.setItem('authenticatie', JSON.stringify (gebruikersgegevens));

Door de bovenstaande verklaring toe te voegen aan de authenticateGebruiker functie in de Log in component kunt u de authenticatiegegevens van de gebruiker opslaan in de sessieopslag van de browser.

Onderzoek naar aanvullende use-cases voor cookies en sessieopslag

Deze gids benadrukte hoe cookies en sessieopslag kunnen worden gebruikt om de authenticatiereferenties van gebruikers op te slaan. Desalniettemin bieden cookies en sessieopslag een breder scala aan mogelijkheden dan het opslaan van authenticatie-informatie.

Door gebruik te maken van deze functies, kunt u extra sessiegegevens beheren, wat leidt tot een veiligere en gepersonaliseerde gebruikerservaring.