Autentifikácia slúži ako ochranná bariéra pre softvérové ​​aplikácie, overuje identitu používateľov a poskytuje prístup k chráneným zdrojom. Požadovanie opakovanej autentifikácie používateľov, najmä v rámci jednej relácie, však môže viesť k frustrácii, brániť produktivite a zničiť ich celkovú skúsenosť.

Na prekonanie tohto problému môžete použiť súbory cookie a ukladanie relácií na uchovávanie autentifikačných údajov používateľa a iných prispôsobených údajov informácie – čo používateľom umožňuje zostať overený počas relácie bez potreby neustáleho opätovného overovania, čím sa zlepšuje ich skúsenosti.

Správa údajov o reláciách používateľa pomocou súborov cookie a ukladania relácií

Správa používateľských relácií je kľúčovým aspektom vytvárania robustných a bezpečných aplikácií React. Správna správa údajov o reláciách pomocou súborov cookie a ukladania relácií zaisťuje hladký a prispôsobený používateľský zážitok pri zachovaní potrebných bezpečnostných opatrení.

Údaje o relácii používateľa zvyčajne obsahujú informácie, ktoré sú špecifické pre aktuálnu reláciu používateľa alebo interakciu s aplikáciou. Tieto údaje sa môžu líšiť v závislosti od požiadaviek a funkčnosti aplikácie, ale bežne zahŕňajú nasledovné:

• Informácie súvisiace s autentifikáciou.
• Užívateľské preferencie a nastavenia.
• Aktivita a história používateľov.

Cookies sú textové súbory, ktoré obsahujú malé kúsky údajov uložené webovými prehliadačmi v zariadení používateľa. Bežne sa používajú na ukladanie autentifikačných údajov a akýchkoľvek iných prispôsobených informácií o používateľovi, čo umožňuje webovým aplikáciám udržiavať používateľské relácie vo viacerých reláciách prehliadača.

Na druhej strane, úložisko relácie — podobne ako lokálne úložisko—je mechanizmus ukladania na strane klienta, ktorý poskytujú moderné prehliadače. Na rozdiel od súborov cookie je obmedzená na konkrétnu reláciu prehliadania a je prístupná iba v rámci rovnakej karty alebo okna. Úložisko relácií ponúka jednoduchý a priamy spôsob ukladania údajov špecifických pre reláciu pre webové aplikácie.

Súbory cookie aj ukladanie relácií zohrávajú kľúčovú úlohu pri správe údajov relácie používateľa. Súbory cookie sú skvelé v situáciách, keď sa vyžaduje zachovanie údajov vo viacerých reláciách. Naproti tomu ukladanie relácií je výhodné, keď chcete izolovať údaje v rámci jednej relácie prehliadania, čím poskytuje ľahkú a špecifickú možnosť ukladania.

Teraz sa pozrime na to, ako zaobchádzať s údajmi o relácii používateľa, konkrétne sa zamerajte na ukladanie autentifikačných informácií pomocou súborov cookie a ukladania relácií.

Nastavte projekt React

Začať, nastaviť projekt React pomocou Vite. Potom nainštalujte tieto balíky do svojho projektu.

npm install js-cookie response-router-dom

V ideálnom prípade po prihlásení používateľa a úspešnom overení jeho poverení pomocou rozhrania API na overenie na strane servera, súbory cookie a úložisko relácií ukladajú overovacie tokeny, identifikátory relácie alebo akékoľvek iné relevantné údaje počas používania používateľa relácie.

Tieto tokeny alebo identifikátory spolu s ďalšími údajmi uloženými v prehliadači používateľa sú automaticky zahrnuté v následných požiadavkách odoslaných na server na overenie predtým, ako môže používateľ pristupovať k chránenému prístupu zdrojov.

Týmto spôsobom relácia používateľa pretrváva vo viacerých požiadavkách, čo zaisťuje bezproblémovú interakciu s aplikáciou bez potreby opätovnej autentifikácie pre každú požiadavku.

Kód tohto projektu nájdete v tomto úložisko GitHub.

Správa údajov relácie overenia používateľa pomocou súborov cookie

Ak chcete ukázať, ako používať súbory cookie na ukladanie overovacích informácií používateľov, pokračujte a vytvorte nový komponenty/Login.jsx súbor v src adresár. Do tohto súboru pridajte nasledujúci kód.

1. Vykonajte nasledujúce importy.

   importovať { useState } od'reagovať';
   importovať { useNavigate } od„react-router-dom“;
   importovať Cookies od'js-cookie';

2. Vytvorte funkčný komponent a pridajte prvky JSX pre prihlasovací formulár.

   konšt Prihlásenie = () => {
   konšt [username, setUsername] = useState('');
   konšt [heslo, setPassword] = useState('');
   vrátiť (
   
   
   
    typ="text"
    zástupný symbol ="používateľské meno"
    value={username}
    onChange={(e) => setUsername (e.target.value)}
    />
    typ="heslo"
    zástupný symbol ="heslo"
    value={password}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Predložiť">Prihlásiť sa</button>
    </form>
    );
   };
   exportpredvolená Prihlásiť sa;

Keďže nemáme backend API na overenie prihlasovacích údajov používateľa, vytvoríme funkciu, ktorá overí údaje zadané používateľom do prihlasovacieho formulára pomocou poverení testovacieho používateľa. Do funkčného komponentu pridajte nasledujúci kód.

konšt testAuthData = {
 užívateľské meno: 'test',
 heslo: 'test',
 }; 
konšt authenticateUser = (užívateľské meno, heslo) => {
ak (používateľské meno testAuthData.používateľské meno && heslo testAuthData.password) { 
konšt userData = {
 užívateľské meno,
 heslo,
 };
konšt expirationTime = NovýDátum(NovýDátum().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (userData), { vyprší: expirationTime });
vrátiťpravda;
 }
vrátiťfalošný;
 };
konšt handleLogin = (e) => {
 e.preventDefault();
konšt isAuthenticated = authenticateUser (meno používateľa, heslo);
ak (isAuthenticated) {
 navigovať ('/protected');
 } inak {
// Zobrazenie chybovej správy alebo vykonanie iných akcií pre neúspešnú autentifikáciu
 }
 };

Vnútri autentifikovať používateľa skontroluje, či sa poskytnuté používateľské meno a heslo zhodujú s testovacími overovacími údajmi. Ak sa poverenia zhodujú, vytvorí sa a použivateľské dáta objekt s užívateľským menom a heslom. Potom nastaví čas vypršania platnosti súboru cookie a uloží ho použivateľské dáta v súbore cookie s názvom auth pomocou Súbor cookie metóda.

Po úspešnej autentifikácii sa používateľ presmeruje na chránenú stránku, pretože má oprávnenie na prístup k chráneným zdrojom. Uložením autentifikačných informácií do cookie vytvoríte aktívnu užívateľskú reláciu, ktorá umožní následným požiadavkám automaticky zahrnúť autentifikačné detaily.

Tieto dáta relácie užívateľa umožňujú kódu servera overiť identitu užívateľa a autorizovať prístup k privilégiám bez toho, aby sa od užívateľa vyžadovalo opätovné overenie pri každej požiadavke.

Aktualizujte súbor App.jsx

Vykonajte zmeny v App.jsx súbor na obsluhu smerovania používateľov po úspešnej autentifikácii

importovať { BrowserRouter, Route, Routes, useNavigate } od„react-router-dom“;
importovať Cookies od'js-cookie';
importovať Prihlásiť sa od'./components/Login';
konšt ProtectedPage = ({ ...odpočinok }) => {
konšt isAuthenticated = !!Cookies.get('auth');
konšt navigovať = používaťNavigovať();
konšt handleLogout = () => { 
 Cookies.remove('auth');
 navigovať ('/Prihlásiť sa'); 
 };
ak (!isAuthenticated) {
 navigovať ('/Prihlásiť sa'); 
vrátiťnulový; // Vráti hodnotu null, aby sa zabránilo vykresľovaniu čohokoľvek iného
 }
vrátiť (



veľkosť písma: '24px', farba: 'Modrá' }}>Ahoj, Svet!</h1>
marginTop: '10px' }} onClick={handleLogout}>
 Odhlásiť sa
 </button>
 </div>
 );
};


konšt Aplikácia = () => {
vrátiť (


"/chránené/*" element={} />
"/Prihlásiť sa" element={} />
 </Routes>
 </BrowserRouter>
 );
};
exportpredvolená App;

Vyššie uvedený kód nastavuje potrebné komponenty a logiku smerovania. Obsahuje odhlasovacie tlačidlo, ktoré po stlačení vymaže autentifikačný súbor cookie a presmeruje používateľa na prihlasovaciu stránku.

Okrem toho overuje prítomnosť overovacieho súboru cookie a presmeruje používateľov na prihlasovaciu stránku, ak chýba. Ak je však súbor cookie prítomný, ProtectedPage komponent vykresľuje stránku, ktorá je prístupná výlučne overeným používateľom.

Nakoniec spustite príkaz uvedený nižšie, čím spustíte vývojový server na testovanie aplikácie.

npm spustiť dev

V prehliadači prejdite na http://127.0.0.1:5173/logina zadajte testovacie overovacie poverenia. Po úspešnom prihlásení sa vygeneruje nový súbor cookie s údajmi o relácii, ktorý obsahuje testovacie overovacie informácie.

Po uplynutí platnosti súboru cookie alebo po kliknutí na tlačidlo odhlásenia sa súbor cookie odstráni. Táto akcia účinne ukončí aktívnu reláciu používateľa a odhlási vás.

Ukladanie údajov na overenie používateľa pomocou úložiska relácie

Ukladanie relácie aj súbory cookie fungujú podobne. Ak chcete uložiť potrebné informácie do úložiska relácie prehliadača, môžete použiť sessionStorage.setItem metóda.

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

Pridaním vyššie uvedeného vyhlásenia do autentifikovať používateľa funkciu v Prihlásiť sa komponentu, môžete uložiť autentifikačné údaje používateľa do úložiska relácie prehliadača.

Skúmanie ďalších prípadov použitia pre súbory cookie a ukladanie relácií

Táto príručka zdôraznila, ako používať súbory cookie a ukladanie relácií na ukladanie overovacích poverení používateľov. Napriek tomu súbory cookie a ukladanie relácií ponúkajú širší rozsah možností nad rámec ukladania overovacích informácií.

Využitím týchto funkcií môžete spravovať ďalšie údaje relácie, čo vedie k bezpečnejšiemu a prispôsobenejšiemu používateľskému zážitku.