Autentificering tjener som en beskyttende barriere for softwareapplikationer, verifikation af brugernes identitet og giver adgang til beskyttede ressourcer. Men at kræve, at brugere godkender gentagne gange, især inden for en enkelt session, kan føre til frustration, hæmme produktiviteten og ødelægge deres samlede oplevelse.

For at overvinde denne udfordring kan du bruge cookies og sessionslagring til at bevare brugergodkendelsesdata og andre personlige information – gør det muligt for brugere at forblive autentificerede under en session uden behov for konstant reautentificering, og dermed forbedre deres erfaring.

Håndtering af brugersessionsdata ved hjælp af cookies og sessionslagring

Administration af brugersessioner er et afgørende aspekt af opbygningen af ​​robuste og sikre React-applikationer. Korrekt styring af sessionsdata ved hjælp af cookies og sessionslagring sikrer en jævn og personlig brugeroplevelse, samtidig med at de nødvendige sikkerhedsforanstaltninger opretholdes.

Brugersessionsdata inkluderer typisk oplysninger, der er specifikke for en brugers aktuelle session eller interaktion med en applikation. Disse data kan variere afhængigt af applikationens krav og funktionalitet, men omfatter normalt følgende:

• Godkendelsesrelaterede oplysninger.
• Brugerpræferencer og indstillinger.
• Brugeraktivitet og historik.

Cookies er tekstfiler, der indeholder små stykker data gemt af webbrowsere på brugerens enhed. De bruges almindeligvis til at gemme godkendelsesdata og enhver anden personlig brugerinformation, hvilket gør det muligt for webapplikationer at opretholde brugersessioner på tværs af flere browsersessioner.

På den anden side, sessionslagring - svarende til lokal lagring-er en lagringsmekanisme på klientsiden leveret af moderne browsere. I modsætning til cookies er den begrænset til en specifik browsing-session og kun tilgængelig inden for samme fane eller vindue. Sessionslagring tilbyder en enkel og ligetil måde at gemme sessionsspecifikke data til webapplikationer.

Både cookies og sessionslagring spiller en afgørende rolle i håndteringen af ​​brugersessionsdata. Cookies er gode i situationer, hvor datapersistens på tværs af flere sessioner er påkrævet. I modsætning hertil er sessionslagring fordelagtig, når du ønsker at isolere data inden for en enkelt browsersession, hvilket giver en letvægts og specifik lagringsmulighed.

Lad os nu undersøge, hvordan man håndterer brugersessionsdata, specielt med fokus på lagring af godkendelsesoplysninger ved hjælp af cookies og sessionslagring.

Opsæt et React-projekt

For at komme i gang, opsæt et React-projekt ved hjælp af Vite. Installer derefter disse pakker i dit projekt.

npm installer js-cookie react-router-dom

Ideelt set, efter at en bruger logger ind og deres legitimationsoplysninger er blevet godkendt af en backend-godkendelses-API, cookies og sessionslagring gemmer autentificeringstokens, sessionsidentifikatorer eller andre relevante data under brugerens session.

Disse tokens eller identifikatorer sammen med de yderligere data, der er gemt i brugerens browser, er automatisk inkluderet i efterfølgende anmodninger til serveren for verifikation, før en bruger kan få adgang beskyttet ressourcer.

På denne måde fortsætter en brugers session på tværs af flere anmodninger – hvilket sikrer, at de problemfrit interagerer med applikationen uden at skulle genautentificere for hver anmodning.

Du kan finde dette projekts kode i denne GitHub-depot.

Håndtering af brugergodkendelsessessionsdata ved hjælp af cookies

For at demonstrere, hvordan man bruger cookies til at gemme brugernes autentificeringsoplysninger, skal du gå videre og oprette en ny komponenter/Login.jsx fil i src vejviser. Tilføj følgende kode i denne fil.

1. Foretag følgende importer.

   importere { useState } fra'reagere';
   importere { useNavigate } fra'reager-router-dom';
   importere Cookies fra'js-cookie';

2. Opret en funktionel komponent og tilføj JSX-elementer til en login-formular.

   konst Log ind = () => {
   konst [brugernavn, sætBrugernavn] = useState('');
   konst [adgangskode, sætPassword] = useState('');
   Vend tilbage (
   
   
   
    type="tekst"
    pladsholder="Brugernavn"
    værdi={brugernavn}
    onChange={(e) => sætBrugernavn (e.target.value)}
    />
    type="adgangskode"
    pladsholder="Adgangskode"
    værdi={adgangskode}
    onChange={(e) => sætPassword (e.target.value)}
    />
   "Indsend">Log ind</button>
    </form>
    );
   };
   eksportStandard Log på;

Da vi ikke har en backend-API til at godkende brugerlegitimationsoplysninger, opretter vi en funktion, der verificerer de data, som brugeren indtaster i login-formularen ved hjælp af testbrugerlegitimationsoplysninger. Tilføj følgende kode inde i den funktionelle komponent.

konst testAuthData = {
 brugernavn: 'prøve',
 adgangskode: 'prøve',
 }; 
konst authenticateUser = (brugernavn Kodeord) => {
hvis (brugernavn testAuthData.brugernavn && adgangskode testAuthData.password) { 
konst brugerdata = {
 brugernavn,
 adgangskode,
 };
konst udløbstid = nyDato(nyDato().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (brugerdata), { udløber: expirationTime });
Vend tilbagerigtigt;
 }
Vend tilbagefalsk;
 };
konst handleLogin = (e) => {
 e.preventDefault();
konst isAuthenticated = authenticateUser (brugernavn, adgangskode);
hvis (er Authenticated) {
 navigere('/beskyttet');
 } andet {
// Vis fejlmeddelelse eller udfør andre handlinger for mislykket godkendelse
 }
 };

Inde i autentificereBruger funktion, kontrollerer den, om det angivne brugernavn og adgangskode matcher testgodkendelsesdataene. Hvis legitimationsoplysningerne stemmer overens, opretter det en brugerdata objekt med brugernavn og adgangskode. Den indstiller derefter en udløbstid for cookien og gemmer brugerdata i en cookie navngivet auth bruger Cookies.sæt metode.

Efter vellykket godkendelse omdirigerer en bruger til en beskyttet side, da de er autoriseret til at få adgang til beskyttede ressourcer. Ved at gemme godkendelsesoplysningerne i en cookie etablerer du en aktiv brugersession, hvilket tillader efterfølgende anmodninger at inkludere autentificeringsdetaljerne automatisk.

Disse brugersessionsdata gør det muligt for serverkoden at bekræfte brugerens identitet og autorisere adgang til privilegier uden at kræve, at brugeren genautentificerer for hver anmodning.

Opdater App.jsx-filen

Foretag ændringer i App.jsx fil til at håndtere brugerrouting efter vellykket godkendelse

importere { BrowserRouter, Route, Routes, useNavigate } fra'reager-router-dom';
importere Cookies fra'js-cookie';
importere Log på fra'./components/Login';
konst ProtectedPage = ({ ...rest }) => {
konst isAuthenticated = !!Cookies.get('auth');
konst navigate = useNavigate();
konst handleLogout = () => { 
 Cookies.fjern('auth');
 navigere('/Log på'); 
 };
hvis (!isAuthenticated) {
 navigere('/Log på'); 
Vend tilbagenul; // Returner null for at forhindre gengivelse af andet
 }
Vend tilbage (



skriftstørrelse: '24px', farve: 'blå' }}>Hej verden!</h1>
marginTop: '10px' }} onClick={handleLogout}>
 Log ud
 </button>
 </div>
 );
};


konst App = () => {
Vend tilbage (


"/beskyttet/*" element={} />
"/Log på" element={} />
 </Routes>
 </BrowserRouter>
 );
};
eksportStandard App;

Ovenstående kode opsætter de nødvendige komponenter og routinglogikken. Den inkluderer en logout-knap, der, når den trykkes, sletter autentificeringscookien og omdirigerer brugeren til login-siden.

Derudover verificerer den tilstedeværelsen af ​​autentificeringscookien og omdirigerer brugere til login-siden, hvis den er fraværende. Men hvis cookien er til stede, Beskyttet Side komponent gengiver en side, der udelukkende er tilgængelig for godkendte brugere.

Til sidst skal du køre kommandoen nedenfor for at skrue udviklingsserveren op for at teste applikationen.

npm køre dev

Naviger til i din browser http://127.0.0.1:5173/login,og indtast legitimationsoplysningerne for testgodkendelse. Efter vellykket login genereres en ny cookie indeholdende sessionsdataene, som inkluderer testgodkendelsesoplysningerne.

Når cookien udløber, eller når du klikker på logout-knappen, bliver cookien slettet. Denne handling afslutter effektivt den aktive brugersession og logger dig ud.

Lagring af brugergodkendelsesdata ved hjælp af sessionslagring

Både sessionslagring og cookies fungerer på samme måde. For at gemme de nødvendige oplysninger i browserens sessionslager, kan du bruge sessionStorage.setItem metode.

 sessionStorage.setItem('auth', JSON.stringify (brugerdata));

Ved at tilføje udsagnet ovenfor inde i autentificereBruger funktion i Log på komponent, kan du gemme godkendelsesdata for brugeren i browserens sessionslager.

Udforskning af yderligere anvendelsesmuligheder for cookies og sessionslagring

Denne vejledning fremhævede, hvordan man bruger cookies og sessionslagring til at gemme brugernes autentificeringsoplysninger. Ikke desto mindre tilbyder cookies og sessionslagring en bredere vifte af muligheder ud over lagring af godkendelsesoplysninger.

Ved at udnytte disse funktioner kan du administrere yderligere sessionsdata, hvilket fører til en mere sikker og personlig brugeroplevelse.