A hitelesítés védőkorlátként szolgál a szoftveralkalmazások számára, ellenőrzi a felhasználók azonosságát és hozzáférést biztosít a védett erőforrásokhoz. Ha azonban a felhasználókat ismételten hitelesítik, különösen egyetlen munkameneten belül, az frusztrációhoz, akadályozhatja a termelékenységet és tönkreteheti az általános élményt.

Ennek a kihívásnak a leküzdése érdekében cookie-kat és munkamenet-tárolást használhat a felhasználói hitelesítési adatok és egyéb személyre szabott adatok megőrzéséhez információk – lehetővé téve a felhasználók számára, hogy a munkamenet során hitelesek maradjanak anélkül, hogy folyamatos újrahitelesítésre lenne szükség, következésképpen tapasztalataikat.

Felhasználói munkamenet-adatok kezelése cookie-k és munkamenet-tárolás használatával

A felhasználói munkamenet-kezelés kulcsfontosságú szempont a robusztus és biztonságos React alkalmazások felépítésében. A munkamenetek adatainak megfelelő kezelése cookie-k és munkamenet-tárolás segítségével zökkenőmentes és személyre szabott felhasználói élményt biztosít, miközben fenntartja a szükséges biztonsági intézkedéseket.

A felhasználói munkamenet adatai általában olyan információkat tartalmaznak, amelyek a felhasználó aktuális munkamenetére vagy egy alkalmazással való interakciójára vonatkoznak. Ezek az adatok az alkalmazás követelményeitől és funkcióitól függően változhatnak, de általában a következőket tartalmazzák:

• Hitelesítéssel kapcsolatos információk.
• Felhasználói beállítások és beállítások.
• Felhasználói tevékenység és előzmények.

A sütik olyan szöveges fájlok, amelyek kis adatrészleteket tartalmaznak a webböngészők a felhasználó eszközén tárolják. Általában hitelesítési adatok és bármely más személyre szabott felhasználói információ tárolására használják őket, lehetővé téve a webalkalmazások számára, hogy felhasználói munkameneteket tartsanak fenn több böngészőmunka során.

Másrészről, munkamenet-tárolás – a helyi tárolóhoz hasonlóan– a modern böngészők által biztosított kliensoldali tárolási mechanizmus. A cookie-kkal ellentétben ez egy adott böngészési munkamenetre korlátozódik, és csak ugyanazon a lapon vagy ablakon belül érhető el. A munkamenet-tárolás egyszerű és egyértelmű módot kínál a munkamenet-specifikus adatok webalkalmazásokhoz való tárolására.

A cookie-k és a munkamenet-tárolás egyaránt döntő szerepet játszanak a felhasználói munkamenet-adatok kezelésében. A cookie-k nagyszerűek olyan helyzetekben, amikor több munkameneten keresztüli adatmegmaradás szükséges. Ezzel szemben a munkamenet-tárolás akkor előnyös, ha egyetlen böngészési munkameneten belül szeretné elkülöníteni az adatokat, könnyű és specifikus tárolási lehetőséget biztosítva.

Most pedig nézzük meg, hogyan kezeljük a felhasználói munkamenet-adatokat, különös tekintettel a hitelesítési információk cookie-k és munkamenet-tárolás használatával történő tárolására.

React projekt létrehozása

A kezdéshez állítson be egy React projektet a Vite segítségével. Ezután telepítse ezeket a csomagokat a projektbe.

npm install js-cookie react-router-dom

Ideális esetben, ha a felhasználó bejelentkezik, és hitelesítési adatait sikeresen hitelesítette egy backend hitelesítési API, a cookie-k és a munkamenet-tároló hitelesítési tokeneket, munkamenet-azonosítókat vagy bármely más releváns adatot tárolnak a felhasználó működése során. ülés.

Ezek a tokenek vagy azonosítók a felhasználó böngészőjében tárolt további adatokkal együtt automatikusan szerepelnek a szerverhez intézett későbbi ellenőrzési kérésekben, mielőtt a felhasználó védett hozzáférést kapna erőforrások.

Ily módon a felhasználó munkamenete több kérés során is fennmarad – biztosítva, hogy zökkenőmentesen kommunikáljanak az alkalmazással anélkül, hogy minden kérésnél újra hitelesíteniük kellene.

A projekt kódját itt találja meg GitHub adattár.

Felhasználói hitelesítési munkamenet adatainak kezelése cookie-k segítségével

Ha szeretné bemutatni, hogyan lehet cookie-kat használni a felhasználók hitelesítési információinak tárolására, hozzon létre egy újat összetevők/Login.jsx fájl a src Könyvtár. Ebben a fájlban adja hozzá a következő kódot.

1. Végezze el a következő importálást.

   import { useState } tól től'reagál';
   import { useNavigate } tól től"react-router-dom";
   import Cookie-k tól től"js-cookie";

2. Hozzon létre egy funkcionális összetevőt, és adjon hozzá JSX elemeket a bejelentkezési űrlaphoz.

   const Bejelentkezés = () => {
   const [felhasználónév, setUsername] = useState('');
   const [password, setPassword] = useState('');
   Visszatérés (
   
   
   
    típus="szöveg"
    helyőrző="Felhasználónév"
    érték={felhasználónév}
    onChange={(e) => setUsername (e.target.value)}
    />
    típus="Jelszó"
    helyőrző="Jelszó"
    érték={jelszó}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Beküldés">Bejelentkezés</button>
    </form>
    );
   };
   exportalapértelmezett Belépés;

Mivel nem áll rendelkezésünkre háttér API a felhasználói hitelesítési adatok hitelesítésére, létrehozunk egy függvényt, amely ellenőrzi a felhasználó által a bejelentkezési űrlapon megadott adatokat a tesztfelhasználói hitelesítő adatok segítségével. A funkcionális komponensen belül adja hozzá a következő kódot.

const testAuthData = {
 felhasználónév: 'teszt',
 Jelszó: 'teszt',
 }; 
const authenticateUser = (felhasználónév jelszó) => {
ha (felhasználónév testAuthData.felhasználónév && jelszó testAuthData.password) { 
const userData = {
 felhasználónév,
 Jelszó,
 };
const lejárati idő = újDátum(újDátum().getTime() + 60000);
 Cookies.set("auth", JSON.stringify (felhasználói adatok), { lejár: expirationTime });
Visszatérésigaz;
 }
Visszatéréshamis;
 };
const handleLogin = (e) => {
 e.preventDefault();
const isAuthenticated = authenticateUser (felhasználónév, jelszó);
ha (hitelesített) {
 hajózik('/védett');
 } más {
// Hibaüzenet megjelenítése vagy egyéb műveletek végrehajtása sikertelen hitelesítés esetén
 }
 };

Benne hitelesítsd a felhasználót funkciót, ellenőrzi, hogy a megadott felhasználónév és jelszó egyezik-e a teszt hitelesítési adatokkal. Ha a hitelesítő adatok egyeznek, akkor létrehoz egy felhasználói adat objektumot a felhasználónévvel és jelszóval. Ezután beállítja a süti lejárati idejét, és eltárolja a felhasználói adat nevű sütiben auth használni a Cookies.set módszer.

A sikeres hitelesítés után a felhasználó átirányít egy védett oldalra, mivel jogosult a védett erőforrásokhoz való hozzáférésre. A hitelesítési információk cookie-ban való tárolásával Ön egy aktív felhasználói munkamenetet hoz létre, amely lehetővé teszi, hogy a későbbi kérések automatikusan tartalmazzák a hitelesítési adatokat.

Ezek a felhasználói munkamenet-adatok lehetővé teszik a kiszolgálókód számára, hogy ellenőrizze a felhasználó személyazonosságát, és engedélyezze a hozzáférést a jogosultságokhoz anélkül, hogy a felhasználónak minden egyes kérésnél újra hitelesítenie kellene magát.

Frissítse az App.jsx fájlt

Végezzen módosításokat a App.jsx fájl a sikeres hitelesítés utáni felhasználói útválasztás kezeléséhez

import { BrowserRouter, Route, Routes, useNavigate } tól től"react-router-dom";
import Cookie-k tól től"js-cookie";
import Belépés tól től'./components/Login';
const ProtectedPage = ({ ...pihenés }) => {
const isAuthenticated = !!Cookies.get("auth");
const navigate = useNavigate();
const handleLogout = () => { 
 Cookies.remove("auth");
 hajózik('/Belépés'); 
 };
ha (!isAuthenticated) {
 hajózik('/Belépés'); 
Visszatérésnulla; // A nullát adja vissza, hogy megakadályozza bármi más megjelenítését
 }
Visszatérés (



betűméret: "24px", szín: 'kék' }}>Szia, világ!</h1>
margóTop: "10px" }} onClick={handleLogout}>
 Kijelentkezés
 </button>
 </div>
 );
};


const App = () => {
Visszatérés (


"/védett/*" elem={} />
"/Belépés" elem={} />
 </Routes>
 </BrowserRouter>
 );
};
exportalapértelmezett App;

A fenti kód beállítja a szükséges összetevőket és az útválasztási logikát. Tartalmaz egy kijelentkezési gombot, amelynek megnyomására törli a hitelesítő cookie-t, és átirányítja a felhasználót a bejelentkezési oldalra.

Ezenkívül ellenőrzi a hitelesítési cookie jelenlétét, és a felhasználókat a bejelentkezési oldalra irányítja, ha az hiányzik. Ha azonban jelen van a süti, a Védett oldal összetevő olyan oldalt jelenít meg, amely kizárólag hitelesített felhasználók számára érhető el.

Végül futtassa az alábbi parancsot a fejlesztői kiszolgáló felpörgetéséhez az alkalmazás teszteléséhez.

npm futás dev

Böngészőjében navigáljon ide http://127.0.0.1:5173/login, és adja meg a teszt hitelesítési adatokat. Sikeres bejelentkezés után egy új cookie jön létre, amely tartalmazza a munkamenet adatait, amely tartalmazza a teszt hitelesítési információkat.

Amint a süti lejár, vagy a kijelentkezés gombra kattint, a cookie törlődik. Ez a művelet gyakorlatilag befejezi az aktív felhasználói munkamenetet, és kijelentkezteti Önt.

Felhasználói hitelesítési adatok tárolása a Session Storage használatával

Mind a munkamenet-tárolás, mind a cookie-k hasonlóan működnek. A szükséges információk tárolására a böngésző munkamenet tárolójában használhatja a sessionStorage.setItem módszer.

 sessionStorage.setItem("auth", JSON.stringify (felhasználói adatok));

A fenti állítás hozzáadásával a hitelesítsd a felhasználót funkció a Belépés komponens, a felhasználó hitelesítési adatait a böngésző munkamenet-tárhelyén tárolhatja.

A cookie-k és a munkamenet-tárolás további használati eseteinek feltárása

Ez az útmutató rávilágított arra, hogyan lehet cookie-kat és munkamenet-tárolást használni a felhasználók hitelesítési adatainak tárolására. Mindazonáltal a cookie-k és a munkamenet-tárolás a hitelesítési információk tárolásán túl a lehetőségek szélesebb skáláját kínálják.

E funkciók kihasználásával további munkamenet-adatokat kezelhet, ami biztonságosabb és személyre szabottabb felhasználói élményhez vezet.