Autentizace slouží jako ochranná bariéra pro softwarové aplikace, ověřuje identitu uživatelů a uděluje přístup k chráněným zdrojům. Požadavek na opakované ověřování uživatelů, zejména v rámci jedné relace, však může vést k frustraci, bránit produktivitě a zničit jejich celkovou zkušenost.

Chcete-li tento problém překonat, můžete použít soubory cookie a úložiště relací k uchování údajů o ověření uživatele a dalších personalizovaných údajů informace – umožňuje uživatelům zůstat autentizováni po celou dobu relace bez nutnosti neustálé opětovné autentizace, což následně zlepšuje jejich zkušenosti.

Správa dat uživatelských relací pomocí souborů cookie a úložiště relací

Správa uživatelských relací je zásadním aspektem vytváření robustních a bezpečných aplikací React. Správná správa dat relací pomocí souborů cookie a ukládání relací zajišťuje hladký a personalizovaný uživatelský zážitek při zachování nezbytných bezpečnostních opatření.

Data uživatelské relace obvykle obsahují informace, které jsou specifické pro aktuální relaci uživatele nebo interakci s aplikací. Tato data se mohou lišit v závislosti na požadavcích a funkčnosti aplikace, ale běžně zahrnují následující:

• Informace související s autentizací.
• Uživatelské preference a nastavení.
• Aktivita a historie uživatelů.

Cookies jsou textové soubory, které obsahují malé kousky dat uložené webovými prohlížeči v zařízení uživatele. Běžně se používají k ukládání ověřovacích dat a jakýchkoli dalších personalizovaných uživatelských informací, což umožňuje webovým aplikacím udržovat uživatelské relace v několika relacích prohlížeče.

Na druhou stranu, úložiště relace – podobné místnímu úložišti—je mechanismus úložiště na straně klienta, který poskytují moderní prohlížeče. Na rozdíl od souborů cookie je omezena na konkrétní relaci prohlížení a je přístupná pouze na stejné kartě nebo okně. Úložiště relací nabízí jednoduchý a přímočarý způsob ukládání dat specifických pro relaci pro webové aplikace.

Soubory cookie i ukládání relací hrají zásadní roli při správě dat uživatelských relací. Soubory cookie jsou skvělé v situacích, kdy je vyžadována stálost dat ve více relacích. Naproti tomu úložiště relace je výhodné, když chcete izolovat data v rámci jedné relace procházení, což poskytuje odlehčenou a specifickou možnost úložiště.

Nyní se podívejme, jak zacházet s daty uživatelských relací, konkrétně se zaměříme na ukládání ověřovacích informací pomocí souborů cookie a úložiště relací.

Nastavte projekt React

Začít, nastavit projekt React pomocí Vite. Dále nainstalujte tyto balíčky do vašeho projektu.

npm install js-cookie reagovat-router-dom

V ideálním případě poté, co se uživatel přihlásí a jeho přihlašovací údaje jsou úspěšně ověřeny pomocí backendového autentizačního API, soubory cookie a úložiště relací ukládají ověřovací tokeny, identifikátory relací nebo jakákoli jiná relevantní data během uživatele zasedání.

Tyto tokeny nebo identifikátory spolu s dalšími údaji uloženými v prohlížeči uživatele jsou automaticky zahrnuty v následných požadavcích na server za účelem ověření před tím, než bude mít uživatel chráněný přístup zdroje.

Tímto způsobem relace uživatele přetrvává ve více požadavcích, což zajišťuje bezproblémovou interakci s aplikací, aniž by se museli znovu ověřovat u každého požadavku.

Zde najdete kód tohoto projektu úložiště GitHub.

Správa dat relace ověření uživatele pomocí souborů cookie

Chcete-li předvést, jak používat soubory cookie k ukládání ověřovacích informací uživatelů, pokračujte a vytvořte nový komponenty/Login.jsx soubor v src adresář. Do tohoto souboru přidejte následující kód.

1. Proveďte následující importy.

   import { useState } z'reagovat';
   import { useNavigate } z'react-router-dom';
   import Soubory cookie z'js-cookie';

2. Vytvořte funkční komponentu a přidejte prvky JSX pro přihlašovací formulář.

   konst Přihlášení = () => {
   konst [uživatelské jméno, setUsername] = useState('');
   konst [heslo, setPassword] = useState('');
   vrátit se (
   
   
   
    typ="text"
    zástupný symbol="uživatelské jméno"
    value={username}
    onChange={(e) => setUsername (e.target.value)}
    />
    typ="Heslo"
    zástupný symbol="Heslo"
    value={password}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Předložit">Přihlášení</button>
    </form>
    );
   };
   vývoznívýchozí Přihlásit se;

Vzhledem k tomu, že nemáme backendové API pro ověřování přihlašovacích údajů uživatele, vytvoříme funkci, která ověří údaje zadané uživatelem do přihlašovacího formuláře pomocí přihlašovacích údajů testovacího uživatele. Do funkční součásti přidejte následující kód.

konst testAuthData = {
 uživatelské jméno: 'test',
 Heslo: 'test',
 }; 
konst authenticateUser = (uživatelské jméno heslo) => {
-li (uživatelské jméno testAuthData.uživatelské jméno && heslo testAuthData.password) { 
konst userData = {
 uživatelské jméno,
 Heslo,
 };
konst expirationTime = Novýdatum(Novýdatum().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (userData), { vyprší: expirationTime });
vrátit seskutečný;
 }
vrátit seNepravdivé;
 };
konst handleLogin = (E) => {
 e.preventDefault();
konst isAuthenticated = authenticateUser (uživatelské jméno, heslo);
-li (isAuthenticated) {
 navigovat('/chráněný');
 } jiný {
// Zobrazí chybovou zprávu nebo provede jiné akce pro neúspěšné ověření
 }
 };

Uvnitř autentizovat uživatele zkontroluje, zda poskytnuté uživatelské jméno a heslo odpovídají testovacím autentizačním údajům. Pokud se přihlašovací údaje shodují, vytvoří se a uživatelská data objekt s uživatelským jménem a heslem. Poté nastaví čas vypršení platnosti souboru cookie a uloží jej uživatelská data v cookie s názvem auth za použití Soubor cookie metoda.

Po úspěšné autentizaci se uživatel přesměruje na chráněnou stránku, protože má oprávnění přistupovat k chráněným zdrojům. Uložením autentizačních informací do cookie vytvoříte aktivní uživatelskou relaci, která umožní následným požadavkům automaticky zahrnout autentizační údaje.

Tato data uživatelské relace umožňují kódu serveru ověřit totožnost uživatele a autorizovat přístup k oprávněním, aniž by bylo nutné, aby se uživatel pro každý požadavek znovu autentizoval.

Aktualizujte soubor App.jsx

Proveďte změny v App.jsx soubor pro zpracování směrování uživatele po úspěšné autentizaci

import { BrowserRouter, Route, Routes, useNavigate } z'react-router-dom';
import Soubory cookie z'js-cookie';
import Přihlásit se z'./components/Login';
konst ProtectedPage = ({ ...odpočinek }) => {
konst isAuthenticated = !!Cookies.get('auth');
konst navigovat = useNavigate();
konst handleLogout = () => { 
 Cookies.remove('auth');
 navigovat('/přihlásit se'); 
 };
-li (!isAuthenticated) {
 navigovat('/přihlásit se'); 
vrátit senula; // Vrátí hodnotu null, aby se zabránilo vykreslování čehokoli jiného
 }
vrátit se (



velikost písma: '24px', barva: 'modrý' }}>Ahoj, světe!</h1>
marginTop: '10px' }} onClick={handleLogout}>
 Odhlásit se
 </button>
 </div>
 );
};


konst Aplikace = () => {
vrátit se (


"/chráněný/*" element={} />
"/přihlásit se" element={} />
 </Routes>
 </BrowserRouter>
 );
};
vývoznívýchozí Aplikace;

Výše uvedený kód nastavuje potřebné součásti a logiku směrování. Obsahuje odhlašovací tlačítko, které po stisknutí smaže ověřovací cookie a přesměruje uživatele na přihlašovací stránku.

Kromě toho ověřuje přítomnost ověřovacího souboru cookie a přesměruje uživatele na přihlašovací stránku, pokud chybí. Pokud je však soubor cookie přítomen, ProtectedPage komponenta vykresluje stránku, která je přístupná výhradně ověřeným uživatelům.

Nakonec spusťte níže uvedený příkaz, abyste roztočili vývojový server a otestovali aplikaci.

npm spustit dev

V prohlížeči přejděte na http://127.0.0.1:5173/logina zadejte testovací autentizační pověření. Po úspěšném přihlášení se vygeneruje nový soubor cookie obsahující data relace, která obsahuje testovací autentizační informace.

Jakmile vyprší platnost souboru cookie nebo když kliknete na tlačítko pro odhlášení, bude soubor cookie odstraněn. Tato akce účinně ukončí aktivní uživatelskou relaci a odhlásí vás.

Ukládání dat pro ověření uživatele pomocí úložiště relace

Ukládání relací i soubory cookie fungují podobně. Chcete-li uložit potřebné informace do úložiště relace prohlížeče, můžete použít sessionStorage.setItem metoda.

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

Přidáním výše uvedeného prohlášení dovnitř autentizovat uživatele funkce v Přihlásit se můžete uložit autentizační data uživatele do úložiště relace prohlížeče.

Zkoumání dalších případů použití souborů cookie a úložiště relací

Tato příručka zdůraznila, jak používat soubory cookie a úložiště relací k ukládání ověřovacích pověření uživatelů. Nicméně soubory cookie a ukládání relací nabízejí širší škálu možností nad rámec ukládání ověřovacích informací.

Využitím těchto funkcí můžete spravovat další data relací, což vede k bezpečnějšímu a personalizovanému uživatelskému prostředí.