Autentifikacija služi kao zaštitna barijera za softverske aplikacije, provjeravajući identitet korisnika i dopuštajući pristup zaštićenim resursima. Međutim, zahtijevanje od korisnika da se opetovano autentificiraju, osobito unutar jedne sesije, može dovesti do frustracija, spriječiti produktivnost i uništiti njihovo cjelokupno iskustvo.

Kako biste prevladali ovaj izazov, možete koristiti kolačiće i pohranu sesije kako biste sačuvali podatke o autentifikaciji korisnika i druge personalizirane informacija—omogućujući korisnicima da ostanu autentificirani tijekom cijele sesije bez potrebe za stalnom ponovnom autentifikacijom, posljedično poboljšavajući njihovo iskustvo.

Upravljanje podacima o korisničkim sesijama pomoću kolačića i pohranjivanja sesija

Upravljanje korisničkim sesijama ključni je aspekt izgradnje robusnih i sigurnih React aplikacija. Pravilno upravljanje podacima o sesiji pomoću kolačića i pohrane sesije osigurava glatko i personalizirano korisničko iskustvo uz održavanje potrebnih sigurnosnih mjera.

Podaci o korisničkoj sesiji obično uključuju informacije koje su specifične za korisnikovu trenutnu sesiju ili interakciju s aplikacijom. Ovi podaci mogu varirati ovisno o zahtjevima i funkcionalnosti aplikacije, ali obično uključuju sljedeće:

• Informacije povezane s autentifikacijom.
• Korisničke postavke i postavke.
• Korisnička aktivnost i povijest.

Kolačići su tekstualne datoteke koje sadrže male dijelove podataka pohranjuju web preglednici na uređaju korisnika. Obično se koriste za pohranu podataka za provjeru autentičnosti i bilo kojih drugih personaliziranih korisničkih informacija, omogućujući web aplikacijama održavanje korisničkih sesija u više sesija preglednika.

S druge strane, pohrana sesije—slično lokalnoj pohrani— je mehanizam za pohranu na strani klijenta koji pružaju moderni preglednici. Za razliku od kolačića, ograničen je na određenu sesiju pregledavanja i dostupan mu je samo unutar iste kartice ili prozora. Pohrana sesije nudi jednostavan i jasan način za pohranu podataka specifičnih za sesiju za web aplikacije.

I kolačići i pohrana sesije igraju ključnu ulogu u upravljanju podacima o korisničkim sesijama. Kolačići su izvrsni u situacijama kada je potrebna postojanost podataka tijekom više sesija. Nasuprot tome, pohrana sesije je korisna kada želite izolirati podatke unutar jedne sesije pregledavanja, pružajući laganu i specifičnu opciju pohrane.

Sada istražimo kako postupati s podacima o korisničkim sesijama, posebno se fokusirajući na pohranjivanje informacija o autentifikaciji pomoću kolačića i pohrane sesije.

Postavite React projekt

Započeti, postaviti React projekt koristeći Vite. Zatim instalirajte ove pakete u svoj projekt.

npm instalirajte js-kolačić react-router-dom

U idealnom slučaju, nakon što se korisnik prijavi i njihove vjerodajnice uspješno autentificira API za pozadinsku autentifikaciju, kolačići i pohrana sesije pohranjuju tokene za provjeru autentičnosti, identifikatore sesije ili bilo koje druge relevantne podatke tijekom korisnikove sjednica.

Ovi tokeni ili identifikatori zajedno s dodatnim podacima pohranjeni u pregledniku korisnika automatski se uključeno u naknadne zahtjeve upućene poslužitelju za provjeru prije nego što korisnik može zaštićeno pristupiti resursi.

Na ovaj način korisnička sesija traje kroz više zahtjeva—osiguravajući besprijekornu interakciju s aplikacijom bez potrebe za ponovnom provjerom autentičnosti za svaki zahtjev.

Kôd ovog projekta možete pronaći ovdje GitHub spremište.

Upravljanje podacima sesije provjere autentičnosti korisnika pomoću kolačića

Da biste pokazali kako koristiti kolačiće za pohranjivanje informacija o autentifikaciji korisnika, samo naprijed i stvorite novi komponente/Login.jsx datoteka u src imenik. Unutar ove datoteke dodajte sljedeći kod.

1. Napravite sljedeće uvoze.

   uvoz {useState} iz'reagirati';
   uvoz {useNavigate} iz'react-router-dom';
   uvoz Kolačići iz'js-kolačić';

2. Napravite funkcionalnu komponentu i dodajte JSX elemente za obrazac za prijavu.

   konst Prijava = () => {
   konst [korisničko ime, setKorisničko ime] = useState('');
   konst [lozinka, setPassword] = useState('');
   povratak (
   
   
   
    vrsta="tekst"
    rezervirano mjesto="Korisničko ime"
    vrijednost={korisničko ime}
    onChange={(e) => setUsername (e.target.value)}
    />
    vrsta="lozinka"
    rezervirano mjesto="Lozinka"
    vrijednost={lozinka}
    onChange={(e) => setPassword (e.target.value)}
    />
   "podnijeti">Prijava</button>
    </form>
    );
   };
   izvozzadano Prijaviti se;

Budući da nemamo pozadinski API za provjeru autentičnosti korisničkih vjerodajnica, izradit ćemo funkciju koja provjerava podatke koje je korisnik unio u obrazac za prijavu pomoću testnih korisničkih vjerodajnica. Unutar funkcionalne komponente dodajte sljedeći kod.

konst testAuthData = {
 Korisničko ime: 'test',
 lozinka: 'test',
 }; 
konst authenticateUser = (korisničko ime Zaporka) => {
ako (korisničko ime testAuthData.username && lozinka testAuthData.password) { 
konst korisnički podaci = {
 Korisničko ime,
 lozinka,
 };
konst vrijeme isteka = noviDatum(noviDatum().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (userData), { ističe: vrijeme isteka });
povratakpravi;
 }
povrataklažno;
 };
konst handleLogin = (e) => {
 e.preventDefault();
konst isAuthenticated = authenticateUser (korisničko ime, lozinka);
ako (isAuthenticated) {
 kretati se ('/zaštićen');
 } drugo {
// Prikaži poruku o pogrešci ili izvrši druge radnje za neuspjelu provjeru autentičnosti
 }
 };

Unutar autentifikirajKorisnika funkciju, provjerava odgovaraju li navedeno korisničko ime i lozinka podacima za provjeru autentičnosti. Ako se vjerodajnice podudaraju, stvara se a korisnički podaci objekt s korisničkim imenom i lozinkom. Zatim postavlja vrijeme isteka za kolačić i pohranjuje korisnički podaci u kolačiću pod nazivom auth koristiti Kolačići.set metoda.

Nakon uspješne autentifikacije, korisnik se preusmjerava na zaštićenu stranicu budući da je ovlašten za pristup zaštićenim resursima. Pohranjivanjem informacija o autentifikaciji u kolačić, uspostavljate aktivnu korisničku sesiju, dopuštajući naknadnim zahtjevima da automatski uključe pojedinosti o autentifikaciji.

Ovi podaci o korisničkoj sesiji omogućuju kodu poslužitelja da potvrdi identitet korisnika i odobri pristup povlasticama bez potrebe da se korisnik ponovno autentificira za svaki zahtjev.

Ažurirajte datoteku App.jsx

Unesite promjene u App.jsx datoteku za rukovanje usmjeravanjem korisnika nakon uspješne provjere autentičnosti

uvoz { BrowserRouter, Route, Routes, useNavigate } iz'react-router-dom';
uvoz Kolačići iz'js-kolačić';
uvoz Prijaviti se iz'./components/Login';
konst Zaštićena stranica = ({... odmor }) => {
konst isAuthenticated = !!Cookies.get('auth');
konst navigacija = useNavigate();
konst rukovanjeOdjava = () => { 
 Kolačići.ukloni('auth');
 kretati se ('/prijaviti se'); 
 };
ako (!isAuthenticated) {
 kretati se ('/prijaviti se'); 
povratakništavan; // Vrati null da spriječi iscrtavanje bilo čega drugog
 }
povratak (



veličina fonta: '24px', boja: 'plavo' }}>Zdravo, svijete!</h1>
marginTop: '10px' }} onClick={handleLogout}>
 Odjavite se
 </button>
 </div>
 );
};


konst Aplikacija = () => {
povratak (


"/zaštićen/*" element={} />
"/prijaviti se" element={} />
 </Routes>
 </BrowserRouter>
 );
};
izvozzadano aplikacija;

Gornji kod postavlja potrebne komponente i logiku usmjeravanja. Sadrži gumb za odjavu koji, kada se pritisne, briše autentifikacijski kolačić i preusmjerava korisnika na stranicu za prijavu.

Osim toga, provjerava prisutnost kolačića za provjeru autentičnosti i preusmjerava korisnike na stranicu za prijavu ako ga nema. Međutim, ako je kolačić prisutan, Zaštićena stranica komponenta prikazuje stranicu koja je dostupna isključivo autentificiranim korisnicima.

Na kraju, pokrenite naredbu u nastavku da pokrenete razvojni poslužitelj i testirate aplikaciju.

npm run dev

U pregledniku idite na http://127.0.0.1:5173/login,i unesite vjerodajnice za provjeru autentičnosti. Nakon uspješne prijave, generira se novi kolačić koji sadrži podatke o sesiji, što uključuje informacije o probnoj provjeri autentičnosti.

Kada kolačić istekne ili kada kliknete gumb za odjavu, kolačić se briše. Ova radnja učinkovito završava aktivnu korisničku sesiju i odjavljuje vas.

Pohranjivanje podataka o autentifikaciji korisnika pomoću pohrane sesije

I pohrana sesije i kolačići funkcioniraju slično. Za pohranjivanje potrebnih informacija u pohranu sesije preglednika možete upotrijebiti sessionStorage.setItem metoda.

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

Dodavanjem gornje izjave unutar autentifikirajKorisnika funkcija u Prijaviti se komponente, možete pohraniti podatke za provjeru autentičnosti korisnika u pohranu sesije preglednika.

Istraživanje dodatnih slučajeva upotrebe za kolačiće i pohranu sesije

U ovom je vodiču istaknuto kako koristiti kolačiće i pohranu sesije za pohranjivanje korisničkih vjerodajnica za provjeru autentičnosti. Bez obzira na to, kolačići i pohrana sesije nude širi raspon mogućnosti osim pohranjivanja podataka za provjeru autentičnosti.

Iskorištavanjem ovih značajki možete upravljati dodatnim podacima o sesiji, što dovodi do sigurnijeg i personaliziranijeg korisničkog iskustva.