Autentisering fungerer som en beskyttende barriere for programvareapplikasjoner, verifiserer identiteten til brukere og gir tilgang til beskyttede ressurser. Men å kreve at brukere autentiserer gjentatte ganger, spesielt innenfor en enkelt økt, kan føre til frustrasjon, hemme produktiviteten og ødelegge den generelle opplevelsen.

For å overvinne denne utfordringen kan du bruke informasjonskapsler og øktlagring for å opprettholde brukerautentiseringsdata og andre personlig tilpassede informasjon – slik at brukere kan forbli autentisert gjennom en økt uten behov for konstant reautentisering, og dermed forbedre deres erfaring.

Administrere brukerøktdata ved hjelp av informasjonskapsler og øktlagring

Brukerøktadministrasjon er et avgjørende aspekt ved å bygge robuste og sikre React-applikasjoner. Riktig administrasjon av øktdata ved hjelp av informasjonskapsler og øktlagring sikrer en jevn og personlig brukeropplevelse samtidig som de nødvendige sikkerhetstiltakene opprettholdes.

Brukerøktdata inkluderer vanligvis informasjon som er spesifikk for en brukers nåværende økt eller interaksjon med en applikasjon. Disse dataene kan variere avhengig av kravene og funksjonaliteten til applikasjonen, men inkluderer vanligvis følgende:

• Autentiseringsrelatert informasjon.
• Brukerpreferanser og innstillinger.
• Brukeraktivitet og historikk.

Informasjonskapsler er tekstfiler som inneholder små databiter lagret av nettlesere på brukerens enhet. De brukes ofte til å lagre autentiseringsdata og all annen personlig brukerinformasjon, slik at nettapplikasjoner kan opprettholde brukerøkter på tvers av flere nettleserøkter.

På den andre siden, øktlagring – ligner på lokal lagring-er en lagringsmekanisme på klientsiden levert av moderne nettlesere. I motsetning til informasjonskapsler, er den begrenset til en spesifikk nettlesingsøkt og kun tilgjengelig innenfor samme fane eller vindu. Øktlagring tilbyr en enkel og grei måte å lagre øktspesifikke data for nettapplikasjoner på.

Både informasjonskapsler og øktlagring spiller en avgjørende rolle i administrasjonen av brukerøktdata. Informasjonskapsler er gode i situasjoner der datautholdenhet over flere økter kreves. I motsetning til dette er øktlagring fordelaktig når du ønsker å isolere data i en enkelt nettleserøkt, noe som gir et lett og spesifikt lagringsalternativ.

La oss nå utforske hvordan du håndterer brukerøktdata, spesielt med fokus på lagring av autentiseringsinformasjon ved hjelp av informasjonskapsler og øktlagring.

Sett opp et React-prosjekt

For å komme i gang, sette opp et React-prosjekt ved hjelp av Vite. Installer deretter disse pakkene i prosjektet ditt.

npm installer js-cookie react-router-dom

Ideelt sett, etter at en bruker logger på og deres legitimasjon er autentisert av en backend-autentiserings-API, informasjonskapsler og øktlagring lagrer autentiseringstokener, øktidentifikatorer eller andre relevante data under brukerens økt.

Disse tokens eller identifikatorene sammen med tilleggsdataene som er lagret i brukerens nettleser, blir automatisk inkludert i påfølgende forespørsler sendt til serveren for verifisering før en bruker kan få tilgang beskyttet ressurser.

På denne måten vedvarer en brukers økt på tvers av flere forespørsler – og sikrer at de sømløst samhandler med applikasjonen uten å måtte autentisere på nytt for hver forespørsel.

Du finner dette prosjektets kode i denne GitHub-depot.

Administrere brukerautentiseringsøktdata ved hjelp av informasjonskapsler

For å demonstrere hvordan du bruker informasjonskapsler til å lagre brukernes autentiseringsinformasjon, fortsett og opprett en ny komponenter/Login.jsx fil i src katalog. Inni denne filen legger du til følgende kode.

1. Gjør følgende importer.

   import { useState } fra'reagere';
   import { useNavigate } fra'reager-ruter-dom';
   import Informasjonskapsler fra'js-cookie';

2. Lag en funksjonell komponent og legg til JSX-elementer for et påloggingsskjema.

   konst Logg inn = () => {
   konst [brukernavn, settBrukernavn] = brukState('');
   konst [passord, setPassword] = brukState('');
   komme tilbake (
   
   
   
    type="tekst"
    plassholder="Brukernavn"
    verdi={brukernavn}
    onChange={(e) => setBrukernavn (e.target.value)}
    />
    type="passord"
    plassholder="Passord"
    verdi={passord}
    onChange={(e) => setPassword (e.target.value)}
    />
   "sende inn">Logg inn</button>
    </form>
    );
   };
   eksportmisligholde Logg Inn;

Siden vi ikke har et backend-API for å autentisere brukerlegitimasjon, oppretter vi en funksjon som bekrefter dataene som er angitt av brukeren i påloggingsskjemaet ved hjelp av testbrukerlegitimasjon. Inne i den funksjonelle komponenten legger du til følgende kode.

konst testAuthData = {
 brukernavn: 'test',
 passord: 'test',
 }; 
konst authenticateUser = (brukernavn passord) => {
hvis (brukernavn testAuthData.brukernavn && passord testAuthData.password) { 
konst brukerdata = {
 brukernavn,
 passord,
 };
konst utløpstid = nyDato(nyDato().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (brukerdata), { utløper: expirationTime });
komme tilbakeekte;
 }
komme tilbakefalsk;
 };
konst handleLogin = (e) => {
 e.preventDefault();
konst isAuthenticated = authenticateUser (brukernavn, passord);
hvis (er autentisert) {
 navigere('/beskyttet');
 } ellers {
// Vis feilmelding eller utfør andre handlinger for mislykket autentisering
 }
 };

Inne i autentiserBruker funksjon, sjekker den om det oppgitte brukernavnet og passordet samsvarer med testautentiseringsdataene. Hvis legitimasjonen samsvarer, opprettes en brukerdata objekt med brukernavn og passord. Den angir deretter en utløpstid for informasjonskapselen og lagrer brukerdata i en informasjonskapsel som heter auth bruker Informasjonskapsler.sett metode.

Etter vellykket autentisering omdirigerer en bruker til en beskyttet side siden de er autorisert til å få tilgang til beskyttede ressurser. Ved å lagre autentiseringsinformasjonen i en informasjonskapsel, etablerer du en aktiv brukerøkt, slik at påfølgende forespørsler kan inkludere autentiseringsdetaljene automatisk.

Disse brukersesjonsdataene lar serverkoden verifisere brukerens identitet og autorisere tilgang til privilegier uten å kreve at brukeren reautentiserer for hver forespørsel.

Oppdater App.jsx-filen

Gjør endringer i App.jsx fil for å håndtere brukerruting etter vellykket autentisering

import { BrowserRouter, Route, Routes, useNavigate } fra'reager-ruter-dom';
import Informasjonskapsler fra'js-cookie';
import Logg Inn fra'./components/Login';
konst ProtectedPage = ({ ...rest }) => {
konst isAuthenticated = !!Cookies.get('auth');
konst navigate = useNavigate();
konst handleLogout = () => { 
 Cookies.remove('auth');
 navigere('/Logg Inn'); 
 };
hvis (!isAuthenticated) {
 navigere('/Logg Inn'); 
komme tilbakenull; // Returner null for å forhindre gjengivelse av noe annet
 }
komme tilbake (



skriftstørrelse: '24px', farge: 'blå' }}>Hei verden!</h1>
margTopp: '10px' }} onClick={handleLogout}>
 Logg ut
 </button>
 </div>
 );
};


konst App = () => {
komme tilbake (


"/beskyttet/*" element={} />
"/Logg Inn" element={} />
 </Routes>
 </BrowserRouter>
 );
};
eksportmisligholde App;

Koden ovenfor setter opp de nødvendige komponentene og rutinglogikken. Den inkluderer en utloggingsknapp som, når den trykkes, sletter autentiseringsinformasjonskapselen og omdirigerer brukeren til påloggingssiden.

I tillegg verifiserer den tilstedeværelsen av autentiseringsinformasjonskapselen og omdirigerer brukere til påloggingssiden hvis den er fraværende. Men hvis informasjonskapselen er tilstede, vil den ProtectedPage komponent gjengir en side som er eksklusivt tilgjengelig for autentiserte brukere.

Til slutt, kjør kommandoen nedenfor for å spinne opp utviklingsserveren for å teste applikasjonen.

npm kjøre dev

Naviger til i nettleseren din http://127.0.0.1:5173/login,og skriv inn testautentiseringslegitimasjonen. Etter vellykket pålogging genereres en ny informasjonskapsel som inneholder øktdataene, som inkluderer testautentiseringsinformasjonen.

Når informasjonskapselen utløper eller når du klikker på utloggingsknappen, blir informasjonskapselen slettet. Denne handlingen avslutter den aktive brukerøkten og logger deg ut.

Lagre brukerautentiseringsdata ved å bruke øktlagring

Både øktlagring og informasjonskapsler fungerer på samme måte. For å lagre nødvendig informasjon i nettleserens øktlagring, kan du bruke sessionStorage.setItem metode.

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

Ved å legge til uttalelsen ovenfor inne i autentiserBruker funksjon i Logg Inn komponent, kan du lagre autentiseringsdataene til brukeren i nettleserens øktlagring.

Utforske flere brukstilfeller for informasjonskapsler og øktlagring

Denne veiledningen fremhevet hvordan du bruker informasjonskapsler og øktlagring for å lagre brukernes autentiseringslegitimasjon. Ikke desto mindre tilbyr informasjonskapsler og øktlagring et bredere spekter av funksjoner utover lagring av autentiseringsinformasjon.

Ved å utnytte disse funksjonene kan du administrere ytterligere øktdata, noe som fører til en sikrere og mer personlig tilpasset brukeropplevelse.