Autentifikavimas yra apsauginė kliūtis programinės įrangos programoms, tikrinant vartotojų tapatybę ir suteikiant prieigą prie saugomų išteklių. Tačiau reikalaujant, kad naudotojai autentifikuotųsi pakartotinai, ypač per vieną seansą, gali sukelti nusivylimą, trukdyti produktyvumui ir sugadinti bendrą patirtį.

Norėdami įveikti šį iššūkį, galite naudoti slapukus ir seanso saugyklą, kad išsaugotumėte vartotojo autentifikavimo duomenis ir kitus suasmenintus duomenis informacija – leidžia vartotojams išlikti autentifikuotiems per visą seansą be nuolatinio pakartotinio autentifikavimo, todėl jų patirtis.

Vartotojo seanso duomenų tvarkymas naudojant slapukus ir seanso saugyklą

Vartotojo seansų valdymas yra esminis aspektas kuriant patikimas ir saugias „React“ programas. Tinkamas seanso duomenų tvarkymas naudojant slapukus ir seanso saugyklą užtikrina sklandžią ir individualizuotą vartotojo patirtį, kartu išlaikant būtinas saugumo priemones.

Naudotojo seanso duomenys paprastai apima informaciją, susijusią su dabartine vartotojo sesija arba sąveika su programa. Šie duomenys gali skirtis priklausomai nuo programos reikalavimų ir funkcionalumo, bet dažniausiai apima šiuos dalykus:

• Su autentifikavimu susijusi informacija.
• Vartotojo nuostatos ir nustatymai.
• Vartotojų veikla ir istorija.

Slapukai yra tekstiniai failai, kuriuose yra mažų duomenų žiniatinklio naršyklės saugomos vartotojo įrenginyje. Jie dažniausiai naudojami autentifikavimo duomenims ir bet kokiai kitai suasmenintai vartotojo informacijai saugoti, todėl žiniatinklio programos gali palaikyti vartotojo seansus keliose naršyklės sesijose.

Iš kitos pusės, seanso saugykla – panaši į vietinę saugyklą– yra kliento pusės saugojimo mechanizmas, kurį teikia šiuolaikinės naršyklės. Skirtingai nuo slapukų, jis apsiriboja konkrečia naršymo sesija ir pasiekiamas tik tame pačiame skirtuke arba lange. Seanso saugykla siūlo paprastą ir nesudėtingą būdą saugoti konkrečios sesijos duomenis žiniatinklio programoms.

Tiek slapukai, tiek seanso saugykla atlieka esminį vaidmenį tvarkant vartotojo seanso duomenis. Slapukai puikiai tinka tais atvejais, kai reikalingas duomenų išlikimas per kelias sesijas. Priešingai, seanso saugykla yra naudinga, kai norite atskirti duomenis per vieną naršymo seansą, suteikiant lengvą ir specifinę saugojimo parinktį.

Dabar panagrinėkime, kaip tvarkyti vartotojo seanso duomenis, ypač sutelkdami dėmesį į autentifikavimo informacijos saugojimą naudojant slapukus ir seanso saugyklą.

Sukurkite Reagavimo projektą

Pradėti, nustatykite React projektą naudodami Vite. Tada įdiekite šiuos paketus savo projekte.

npm įdiegti js-cookie react-router-dom

Idealiu atveju, kai vartotojas prisijungia ir jo kredencialai sėkmingai autentifikuojami naudojant pagrindinę autentifikavimo API, slapukai ir seanso saugykla saugo autentifikavimo prieigos raktus, seanso identifikatorius ar bet kokius kitus susijusius duomenis, kai vartotojas sesija.

Šie prieigos raktai arba identifikatoriai kartu su papildomais duomenimis, saugomais vartotojo naršyklėje, yra automatiškai įtraukta į vėlesnes serveriui pateiktas patvirtinimo užklausas, kad vartotojas galėtų pasiekti apsaugotą išteklių.

Tokiu būdu naudotojo seansas išlieka gavus kelias užklausas, užtikrinant, kad jie sklandžiai sąveikauja su programa ir nereikia iš naujo autentifikuoti kiekvienos užklausos.

Šio projekto kodą rasite čia GitHub saugykla.

Vartotojo autentifikavimo seanso duomenų tvarkymas naudojant slapukus

Norėdami parodyti, kaip naudoti slapukus vartotojų autentifikavimo informacijai saugoti, eikite į priekį ir sukurkite naują komponentai/Login.jsx failą src katalogas. Šiame faile pridėkite šį kodą.

1. Atlikite toliau nurodytus importus.

   importuoti { useState } iš'reaguoti';
   importuoti { useNavigate } iš'react-router-dom';
   importuoti Slapukai iš"js-slapukas";

2. Sukurkite funkcinį komponentą ir pridėkite JSX elementus prisijungimo formai.

   konst Prisijungimas = () => {
   konst [naudotojo vardas, setUsername] = useState('');
   konst [password, setPassword] = useState('');
   grąžinti (
   
   
   
    tipas ="tekstas"
    vietos rezervuaras="Vartotojo vardas"
    value={naudotojo vardas}
    onChange={(e) => setUsername (e.target.value)}
    />
    tipas ="Slaptažodis"
    vietos rezervuaras="Slaptažodis"
    value={password}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Pateikti">Prisijungti</button>
    </form>
    );
   };
   eksportuotinumatytas Prisijungti;

Kadangi neturime vartotojo kredencialų autentifikavimo sąsajos, sukursime funkciją, kuri patikrins vartotojo prisijungimo formoje įvestus duomenis naudodami bandomuosius vartotojo kredencialus. Funkcinio komponento viduje pridėkite šį kodą.

konst testAuthData = {
 Vartotojo vardas: "bandymas",
 Slaptažodis: "bandymas",
 }; 
konst authenticateUser = (vartotojo vardas Slaptažodis) => {
jeigu (naudotojo vardas testAuthData.username && slaptažodis testAuthData.password) { 
konst userData = {
 Vartotojo vardas,
 Slaptažodis,
 };
konst galiojimo laikas = naujasData(naujasData().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (naudotojo duomenys), { baigiasi: galiojimo laikas });
grąžintitiesa;
 }
grąžintiklaidinga;
 };
konst handleLogin = (e) => {
 e.preventDefault();
konst isAuthenticated = authenticateUser (vartotojo vardas, slaptažodis);
jeigu (yra autentifikuota) {
 Rodyti kelią('/apsaugota');
 } Kitas {
// Rodyti klaidos pranešimą arba atlikti kitus veiksmus, jei autentifikavimas nepavyko
 }
 };

Viduje autentifikuoti vartotoją funkcija, ji patikrina, ar pateiktas vartotojo vardas ir slaptažodis atitinka bandomuosius autentifikavimo duomenis. Jei kredencialai sutampa, sukuriama a vartotojo duomenys objektas su vartotojo vardu ir slaptažodžiu. Tada jis nustato slapuko galiojimo laiką ir išsaugo vartotojo duomenys pavadintame slapuke aut naudojant Cookies.set metodas.

Po sėkmingo autentifikavimo vartotojas nukreipia į apsaugotą puslapį, nes turi teisę pasiekti apsaugotus išteklius. Išsaugodami autentifikavimo informaciją slapuke, sukuriate aktyvią vartotojo sesiją, leidžiančią į vėlesnes užklausas automatiškai įtraukti autentifikavimo informaciją.

Šie vartotojo seanso duomenys leidžia serverio kodui patikrinti vartotojo tapatybę ir suteikti prieigą prie privilegijų, nereikalaujant, kad vartotojas iš naujo autentifikuotų kiekvieną užklausą.

Atnaujinkite App.jsx failą

Atlikite pakeitimus App.jsx failas, skirtas tvarkyti naudotojo nukreipimą po sėkmingo autentifikavimo

importuoti { BrowserRouter, Route, Routes, useNavigate } iš'react-router-dom';
importuoti Slapukai iš"js-slapukas";
importuoti Prisijungti iš'./components/Prisijungti';
konst Apsaugotas puslapis = ({ ...poilsis }) => {
konst isAuthenticated = !!Cookies.get('auth');
konst naršyti = useNavigate();
konst handLogout = () => { 
 Cookies.remove('auth');
 Rodyti kelią('/Prisijungti'); 
 };
jeigu (!yra autentifikuota) {
 Rodyti kelią('/Prisijungti'); 
grąžintinulinis; // Grąžinkite nulį, kad būtų išvengta nieko kito
 }
grąžinti (



šrifto dydis: "24px", spalva: 'mėlyna' }}>Sveikas, pasauli!</h1>
paraštėViršus: „10 piks.“ }} onClick={handleLogout}>
 Atsijungti
 </button>
 </div>
 );
};


konst Programa = () => {
grąžinti (


"/protected/*" element={} />
"/Prisijungti" element={} />
 </Routes>
 </BrowserRouter>
 );
};
eksportuotinumatytas Programėlė;

Aukščiau pateiktas kodas nustato būtinus komponentus ir maršruto parinkimo logiką. Jame yra atsijungimo mygtukas, kurį paspaudus ištrinamas autentifikavimo slapukas ir vartotojas nukreipiamas į prisijungimo puslapį.

Be to, jis patikrina, ar yra autentifikavimo slapukas, ir nukreipia vartotojus į prisijungimo puslapį, jei jo nėra. Tačiau jei slapukas yra, Apsaugotas puslapis komponentas pateikia puslapį, kuris yra išskirtinai prieinamas autentifikuotiems vartotojams.

Galiausiai paleiskite toliau pateiktą komandą, kad sukurtumėte kūrimo serverį ir išbandytumėte programą.

npm paleisti dev

Naršyklėje eikite į http://127.0.0.1:5173/login, ir įveskite bandomuosius autentifikavimo kredencialus. Sėkmingai prisijungus, sugeneruojamas naujas slapukas su seanso duomenimis, įskaitant bandomąją autentifikavimo informaciją.

Pasibaigus slapuko galiojimo laikui arba paspaudus atsijungimo mygtuką, slapukas ištrinamas. Šis veiksmas veiksmingai užbaigia aktyvią vartotojo seansą ir išregistruoja jus.

Vartotojo autentifikavimo duomenų saugojimas naudojant seanso saugyklą

Tiek seanso saugykla, tiek slapukai veikia panašiai. Norėdami išsaugoti reikiamą informaciją naršyklės seanso saugykloje, galite naudoti sessionStorage.setItem metodas.

 sessionStorage.setItem('auth', JSON.stringify (naudotojo duomenys));

Įtraukdami aukščiau esantį teiginį viduje autentifikuoti vartotoją funkcija Prisijungti komponentą, galite saugoti vartotojo autentifikavimo duomenis naršyklės seanso saugykloje.

Papildomų slapukų ir seansų saugojimo atvejų tyrinėjimas

Šiame vadove buvo pabrėžta, kaip naudoti slapukus ir seanso saugyklą vartotojų autentifikavimo kredencialams saugoti. Nepaisant to, slapukai ir seanso saugykla siūlo daugiau galimybių, ne tik saugoti autentifikavimo informaciją.

Naudodamiesi šiomis funkcijomis galite tvarkyti papildomus seanso duomenis, o tai užtikrina saugesnę ir labiau suasmenintą naudotojo patirtį.