Avtentikacija služi kot zaščitna ovira za programske aplikacije, preverja identiteto uporabnikov in omogoča dostop do zaščitenih virov. Vendar pa lahko zahteva, da uporabniki večkrat preverjajo pristnost, zlasti v eni sami seji, povzroči frustracije, ovira produktivnost in uniči njihovo splošno izkušnjo.

Če želite premagati ta izziv, lahko uporabite piškotke in shranjevanje sej, da ohranite podatke za preverjanje pristnosti uporabnikov in druge prilagojene informacije – uporabnikom omogoča, da ostanejo overjeni skozi celotno sejo brez potrebe po nenehnem ponovnem preverjanju pristnosti, kar posledično izboljša njihove izkušnje.

Upravljanje podatkov o uporabniških sejah z uporabo piškotkov in shranjevanja sej

Upravljanje uporabniških sej je ključni vidik gradnje robustnih in varnih aplikacij React. Pravilno upravljanje podatkov o sejah z uporabo piškotkov in shranjevanja sej zagotavlja nemoteno in prilagojeno uporabniško izkušnjo ob ohranjanju potrebnih varnostnih ukrepov.

Podatki o uporabniški seji običajno vključujejo informacije, ki so specifične za uporabnikovo trenutno sejo ali interakcijo z aplikacijo. Ti podatki se lahko razlikujejo glede na zahteve in funkcionalnost aplikacije, vendar običajno vključujejo naslednje:

• Informacije, povezane z avtentikacijo.
• Uporabniške nastavitve in nastavitve.
• Aktivnost in zgodovina uporabnikov.

Piškotki so besedilne datoteke, ki vsebujejo majhne delčke podatkov ki jih spletni brskalniki shranijo na uporabnikovo napravo. Običajno se uporabljajo za shranjevanje podatkov za preverjanje pristnosti in drugih prilagojenih uporabniških informacij, kar spletnim aplikacijam omogoča vzdrževanje uporabniških sej v več sejah brskalnika.

Po drugi strani, shranjevanje seje—podobno lokalnemu shranjevanju—je mehanizem za shranjevanje na strani odjemalca, ki ga ponujajo sodobni brskalniki. Za razliko od piškotkov je omejen na določeno sejo brskanja in dostopen le znotraj istega zavihka ali okna. Shranjevanje sej ponuja preprost in neposreden način za shranjevanje podatkov, specifičnih za seje, za spletne aplikacije.

Tako piškotki kot shranjevanje sej igrajo ključno vlogo pri upravljanju podatkov o uporabniških sejah. Piškotki so odlični v primerih, ko je potrebna obstojnost podatkov v več sejah. Nasprotno pa je shranjevanje sej koristno, če želite izolirati podatke znotraj ene seje brskanja, saj zagotavlja lahko in specifično možnost shranjevanja.

Zdaj pa raziščimo, kako ravnati s podatki o uporabniški seji, s posebnim poudarkom na shranjevanju podatkov za preverjanje pristnosti z uporabo piškotkov in shranjevanja seje.

Nastavite projekt React

Za začetek, nastavite projekt React z uporabo Vite. Nato namestite te pakete v svoj projekt.

npm namestite js-cookie react-router-dom

V idealnem primeru, potem ko se uporabnik prijavi in ​​njegove poverilnice uspešno overi API za preverjanje pristnosti v ozadju, piškotki in shramba sej shranjujejo žetone za preverjanje pristnosti, identifikatorje sej ali druge ustrezne podatke med uporabnikovim sejo.

Ti žetoni ali identifikatorji skupaj z dodatnimi podatki se samodejno shranijo v uporabnikovem brskalniku vključeni v poznejše zahteve, poslane strežniku za preverjanje, preden lahko uporabnik dostopa zaščiteno virov.

Na ta način se uporabnikova seja nadaljuje med več zahtevami – kar zagotavlja nemoteno interakcijo z aplikacijo, ne da bi bilo treba za vsako zahtevo znova preverjati pristnost.

Tukaj lahko najdete kodo tega projekta Repozitorij GitHub.

Upravljanje podatkov o seji avtentikacije uporabnika z uporabo piškotkov

Če želite pokazati, kako uporabljati piškotke za shranjevanje podatkov o preverjanju pristnosti uporabnikov, nadaljujte in ustvarite nov komponente/Login.jsx datoteka v src imenik. V to datoteko dodajte naslednjo kodo.

1. Izvedite naslednje uvoze.

   uvoz {useState} od'reagirati';
   uvoz {useNavigate} od'react-router-dom';
   uvoz Piškotki od'js-piškotek';

2. Ustvarite funkcionalno komponento in dodajte elemente JSX za obrazec za prijavo.

   konst Prijava = () => {
   konst [uporabniško ime, setUsername] = useState('');
   konst [geslo, setPassword] = useState('');
   vrnitev (
   
   
   
    vrsta="besedilo"
    placeholder="uporabniško ime"
    vrednost={uporabniško ime}
    onChange={(e) => setUsername (e.target.value)}
    />
    vrsta="geslo"
    placeholder="Geslo"
    vrednost={geslo}
    onChange={(e) => setPassword (e.target.value)}
    />
   "oddaj">Prijava</button>
    </form>
    );
   };
   izvozprivzeto Vpiši se;

Ker nimamo zalednega API-ja za preverjanje pristnosti uporabniških poverilnic, bomo ustvarili funkcijo, ki preverja podatke, ki jih uporabnik vnese v obrazec za prijavo, z uporabo testnih uporabniških poverilnic. Znotraj funkcionalne komponente dodajte naslednjo kodo.

konst testAuthData = {
 uporabniško ime: 'test',
 geslo: 'test',
 }; 
konst authenticateUser = (uporabniško ime geslo) => {
če (uporabniško ime testAuthData.username && geslo testAuthData.password) { 
konst uporabniški podatki = {
 uporabniško ime,
 geslo,
 };
konst expirationTime = novoDatum(novoDatum().getTime() + 60000);
 piškotki.set('avt', JSON.stringify (userData), { poteče: čas poteka });
vrnitevprav;
 }
vrnitevlažno;
 };
konst handleLogin = (e) => {
 e.preventDefault();
konst isAuthenticated = authenticateUser (uporabniško ime, geslo);
če (isAuthenticated) {
 krmariti('/protected');
 } drugače {
// Prikaži sporočilo o napaki ali izvedi druga dejanja za neuspešno preverjanje pristnosti
 }
 };

Znotraj authenticateUser preveri, ali se podano uporabniško ime in geslo ujemata s podatki za preverjanje pristnosti. Če se poverilnice ujemajo, ustvari a uporabniški podatki objekt z uporabniškim imenom in geslom. Nato nastavi čas veljavnosti piškotka in ga shrani uporabniški podatki v piškotku z imenom avt uporabljati Piškotki.set metoda.

Po uspešni avtentikaciji se uporabnik preusmeri na zaščiteno stran, saj je pooblaščen za dostop do zaščitenih virov. Če podatke o preverjanju pristnosti shranite v piškotek, vzpostavite aktivno uporabniško sejo, kar omogoča, da kasnejše zahteve samodejno vključijo podrobnosti preverjanja pristnosti.

Ti podatki o uporabniški seji omogočajo kodi strežnika, da preveri identiteto uporabnika in odobri dostop do privilegijev, ne da bi od uporabnika zahteval ponovno avtentikacijo za vsako zahtevo.

Posodobite datoteko App.jsx

Naredite spremembe v App.jsx datoteko za upravljanje usmerjanja uporabnika po uspešnem preverjanju pristnosti

uvoz { BrowserRouter, Route, Routes, useNavigate } od'react-router-dom';
uvoz Piškotki od'js-piškotek';
uvoz Vpiši se od'./components/Login';
konst Zaščitena stran = ({ ...počitek}) => {
konst isAuthenticated = !!Cookies.get('avt');
konst navigate = useNavigate();
konst handleOdjava = () => { 
 Piškotki.odstrani('avt');
 krmariti('/Vpiši se'); 
 };
če (!isAuthenticated) {
 krmariti('/Vpiši se'); 
vrnitevnič; // Vrni vrednost null, da prepreči upodabljanje česar koli drugega
 }
vrnitev (



velikost pisave: '24px', barva: 'modra' }}>Pozdravljen, svet!</h1>
marginTop: '10px' }} onClick={handleLogout}>
 Odjava
 </button>
 </div>
 );
};


konst Aplikacija = () => {
vrnitev (


"/zaščiteno/*" element={} />
"/Vpiši se" element={} />
 </Routes>
 </BrowserRouter>
 );
};
izvozprivzeto aplikacija;

Zgornja koda nastavi potrebne komponente in logiko usmerjanja. Vključuje gumb za odjavo, ki ob pritisku izbriše piškotek za preverjanje pristnosti in uporabnika preusmeri na stran za prijavo.

Poleg tega preveri prisotnost piškotka za preverjanje pristnosti in uporabnike preusmeri na stran za prijavo, če ga ni. Če pa je piškotek prisoten, bo Zaščitena stran komponenta upodobi stran, ki je dostopna izključno overjenim uporabnikom.

Na koncu zaženite spodnji ukaz, da zavrtite razvojni strežnik in preizkusite aplikacijo.

npm run dev

V brskalniku se pomaknite do http://127.0.0.1:5173/loginin vnesite poverilnice za preverjanje pristnosti. Po uspešni prijavi se ustvari nov piškotek, ki vsebuje podatke o seji, ki vključuje podatke o preizkusni avtentikaciji.

Ko piškotek poteče ali ko kliknete gumb za odjavo, se piškotek izbriše. To dejanje dejansko konča aktivno uporabniško sejo in vas odjavi.

Shranjevanje podatkov za preverjanje pristnosti uporabnika z uporabo shrambe seje

Tako shranjevanje sej kot piškotki delujejo podobno. Za shranjevanje potrebnih informacij v pomnilnik seje brskalnika lahko uporabite sessionStorage.setItem metoda.

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

Z dodajanjem zgornje izjave znotraj authenticateUser funkcijo v Vpiši se komponente, lahko shranite podatke za preverjanje pristnosti uporabnika v shrambo seje brskalnika.

Raziskovanje dodatnih primerov uporabe za piškotke in shranjevanje seje

V tem priročniku je poudarjeno, kako uporabljati piškotke in shranjevanje sej za shranjevanje uporabniških poverilnic za preverjanje pristnosti. Kljub temu piškotki in shranjevanje sej ponujajo širši nabor zmožnosti poleg shranjevanja informacij za preverjanje pristnosti.

Z uporabo teh funkcij lahko upravljate dodatne podatke o sejah, kar vodi do varnejše in prilagojene uporabniške izkušnje.