Autentimine on tarkvararakenduste kaitsebarjäär, mis kontrollib kasutajate identiteeti ja annab juurdepääsu kaitstud ressurssidele. Kuid kasutajate korduva autentimise nõudmine, eriti ühe seansi jooksul, võib põhjustada frustratsiooni, takistada tootlikkust ja rikkuda nende üldise kogemuse.

Selle väljakutse ületamiseks saate kasutaja autentimisandmete ja muude isikupärastatud andmete säilitamiseks kasutada küpsiseid ja seansisalvestust teave – võimaldades kasutajatel jääda autentituks kogu seansi jooksul, ilma et oleks vaja pidevat uuesti autentimist, seega nende kogemus.

Kasutaja seansiandmete haldamine küpsiste ja seansisalvestuse abil

Kasutajaseansside haldamine on tugevate ja turvaliste Reacti rakenduste loomisel ülioluline. Seansiandmete nõuetekohane haldamine küpsiste ja seansisalvestuse abil tagab sujuva ja isikupärastatud kasutajakogemuse, säilitades samal ajal vajalikud turvameetmed.

Kasutaja seansi andmed sisaldavad tavaliselt teavet, mis on spetsiifiline kasutaja praeguse seansi või rakendusega suhtlemise kohta. Need andmed võivad olenevalt rakenduse nõuetest ja funktsionaalsusest erineda, kuid sisaldavad tavaliselt järgmist.

• Autentimisega seotud teave.
• Kasutaja eelistused ja seaded.
• Kasutajate tegevus ja ajalugu.

Küpsised on tekstifailid, mis sisaldavad väikeseid andmeid salvestatud veebibrauserite poolt kasutaja seadmesse. Neid kasutatakse tavaliselt autentimisandmete ja muu isikupärastatud kasutajateabe salvestamiseks, mis võimaldab veebirakendustel säilitada kasutajaseansse mitme brauseri seansi jooksul.

Teiselt poolt, seansisalvestus – sarnane kohalikule salvestusruumile-on kliendipoolne salvestusmehhanism, mida pakuvad kaasaegsed brauserid. Erinevalt küpsistest on see piiratud kindla sirvimisseansiga ja on juurdepääsetav ainult samas vahekaardil või aknas. Seansisalvestus pakub lihtsat ja arusaadavat viisi veebirakenduste seansipõhiste andmete salvestamiseks.

Nii küpsised kui ka seansi salvestamine mängivad kasutajaseansi andmete haldamisel otsustavat rolli. Küpsised on suurepärased olukordades, kus on vaja andmete püsivust mitme seansi jooksul. Seevastu seansi salvestamine on kasulik, kui soovite andmeid eraldada ühe sirvimisseansi jooksul, pakkudes kerget ja spetsiifilist salvestusvõimalust.

Nüüd uurime, kuidas käsitleda kasutaja seansi andmeid, keskendudes eelkõige autentimisteabe salvestamisele küpsiste ja seansisalvestuse abil.

Looge reageerimisprojekt

Alustamiseks seadistage Vite abil Reacti projekt. Järgmisena installige need paketid oma projekti.

npm install js-cookie react-router-dom

Ideaalis pärast kasutaja sisselogimist ja tema mandaatide edukat autentimist taustaprogrammi autentimise API abil, küpsised ja seansisalvestus salvestavad autentimismärke, seansi identifikaatoreid või muid asjakohaseid andmeid kasutaja töötamise ajal. istungil.

Need märgid või identifikaatorid koos kasutaja brauseris salvestatud lisaandmetega salvestatakse automaatselt sisaldub hilisemates serverile tehtud kontrollitaotlustes, enne kui kasutaja pääseb kaitstud juurde ressursse.

Nii püsib kasutaja seanss mitme päringu puhul, tagades, et nad suhtlevad rakendusega sujuvalt, ilma et oleks vaja iga päringu puhul uuesti autentida.

Selle projekti koodi leiate siit GitHubi hoidla.

Kasutaja autentimise seansi andmete haldamine küpsiste abil

Et näidata, kuidas küpsiseid kasutajate autentimisteabe salvestamiseks kasutada, looge uus komponendid/Login.jsx faili src kataloog. Lisage sellesse faili järgmine kood.

1. Tehke järgmised impordid.

   importida { useState } alates'reageeri';
   importida { useNavigate } alates'react-ruuter-dom';
   importida Küpsised alates'js-cookie';

2. Looge funktsionaalne komponent ja lisage sisselogimisvormi jaoks JSX-elemendid.

   konst Logi sisse = () => {
   konst [kasutajanimi, setUsername] = useState('');
   konst [parool, setPassword] = useState('');
   tagasi (
   
   
   
    tüüp="tekst"
    kohatäide="Kasutajanimi"
    väärtus={kasutajanimi}
    onChange={(e) => setUsername (e.target.value)}
    />
    tüüp="parool"
    kohatäide="Parool"
    väärtus={parool}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Esita">Logi sisse</button>
    </form>
    );
   };
   eksportidavaikimisi Logi sisse;

Kuna meil pole kasutajamandaatide autentimiseks taustarakendust API, loome funktsiooni, mis kontrollib kasutaja poolt sisselogimisvormi sisestatud andmeid testkasutaja mandaatide abil. Lisage funktsionaalse komponendi sisse järgmine kood.

konst testAuthData = {
 kasutajanimi: "test",
 parool: "test",
 }; 
konst authenticateUser = (kasutajanimi Parool) => {
kui (kasutajanimi testAuthData.kasutajanimi && parool testAuthData.password) { 
konst userData = {
 kasutajanimi,
 parool,
 };
konst aegumisaeg = uusKuupäev(uusKuupäev().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (userData), { aegub: aegumisaeg });
tagasitõsi;
 }
tagasivale;
 };
konst handleLogin = (e) => {
 e.preventDefault();
konst isAuthenticated = autentidaKasutaja (kasutajanimi, parool);
kui (on Authenticated) {
 navigate('/kaitstud');
 } muidu {
// Ebaõnnestunud autentimise korral kuvage veateade või tehke muid toiminguid
 }
 };

Sees kasutaja autentimine funktsiooni, kontrollib see, kas antud kasutajanimi ja parool vastavad testi autentimise andmetele. Kui mandaadid ühtivad, loob see a kasutaja andmed objekti kasutajanime ja parooliga. Seejärel määrab see küpsisele aegumisaja ja salvestab selle kasutaja andmed nimega küpsises aut kasutades Cookies.set meetod.

Pärast edukat autentimist suunab kasutaja kaitstud lehele, kuna tal on õigus kaitstud ressurssidele juurde pääseda. Salvestades autentimisteabe küpsisesse, loote aktiivse kasutajaseansi, mis võimaldab järgnevatel päringutel automaatselt autentimise üksikasju lisada.

Need kasutajaseansi andmed võimaldavad serveri koodil kontrollida kasutaja identiteeti ja lubada juurdepääsu privileegidele ilma, et kasutaja peaks iga päringu puhul uuesti autentima.

Värskendage faili App.jsx

Tehke muudatused App.jsx fail, mis käsitleb kasutajate marsruutimist pärast edukat autentimist

importida { BrowserRouter, Route, Routes, useNavigate } alates'react-ruuter-dom';
importida Küpsised alates'js-cookie';
importida Logi sisse alates'./components/Login';
konst Kaitstud leht = ({ ...puhata }) => {
konst isAuthenticated = !!Cookies.get('auth');
konst navigate = useNavigate();
konst HandLogout = () => { 
 Cookies.remove('auth');
 navigate('/Logi sisse'); 
 };
kui (!is Authenticated) {
 navigate('/Logi sisse'); 
tagasinull; // Tagastab null, et takistada millegi muu renderdamist
 }
tagasi (



fondi suurus: "24px", värvi: 'sinine' }}>Tere, maailm!</h1>
marginTop: "10px" }} onClick={handleLogout}>
 Logi välja
 </button>
 </div>
 );
};


konst Rakendus = () => {
tagasi (


"/kaitstud/*" element={} />
"/Logi sisse" element={} />
 </Routes>
 </BrowserRouter>
 );
};
eksportidavaikimisi Rakendus;

Ülaltoodud kood seadistab vajalikud komponendid ja marsruutimisloogika. See sisaldab väljalogimisnuppu, mille vajutamisel kustutatakse autentimisküpsis ja suunatakse kasutaja sisselogimislehele.

Lisaks kontrollib see autentimisküpsise olemasolu ja suunab kasutajad ümber sisselogimislehele, kui see puudub. Kui aga küpsis on olemas, siis Kaitstud leht komponent renderdab lehe, mis on ainult autentitud kasutajatele juurdepääsetav.

Lõpuks käivitage arendusserveri käivitamiseks rakenduse testimiseks allolev käsk.

npm käivita dev

Liikuge oma brauseris aadressile http://127.0.0.1:5173/loginja sisestage testautentimise mandaadid. Pärast edukat sisselogimist genereeritakse uus küpsis, mis sisaldab seansi andmeid, mis sisaldab testi autentimise teavet.

Kui küpsis aegub või kui klõpsate väljalogimisnupul, küpsis kustutatakse. See toiming lõpetab tõhusalt aktiivse kasutajaseansi ja logib teid välja.

Kasutaja autentimisandmete salvestamine seansisalvestusruumi abil

Nii seansi salvestamine kui ka küpsised toimivad sarnaselt. Vajaliku teabe salvestamiseks brauseri seansimällu saate kasutada sessionStorage.setItem meetod.

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

Lisades ülaltoodud avalduse sisse kasutaja autentimine funktsioonis Logi sisse komponent, saate salvestada kasutaja autentimisandmed brauseri seansimällu.

Küpsiste ja seansi salvestamise täiendavate kasutusjuhtude uurimine

Selles juhendis tõsteti esile, kuidas kasutada küpsiseid ja seansisalvestust kasutajate autentimismandaatide salvestamiseks. Sellegipoolest pakuvad küpsised ja seansi salvestamine laiemat valikut võimalusi peale autentimisteabe salvestamise.

Neid funktsioone kasutades saate hallata täiendavaid seansiandmeid, mis tagab turvalisema ja isikupärasema kasutuskogemuse.