Autentifikācija kalpo kā aizsargbarjera programmatūras lietojumprogrammām, pārbaudot lietotāju identitāti un piešķirot piekļuvi aizsargātajiem resursiem. Tomēr prasība lietotājiem autentificēties atkārtoti, it īpaši vienas sesijas laikā, var izraisīt neapmierinātību, kavēt produktivitāti un sabojāt viņu vispārējo pieredzi.

Lai pārvarētu šo izaicinājumu, varat izmantot sīkfailus un sesijas krātuvi, lai saglabātu lietotāja autentifikācijas datus un citus personalizētus datus informācija — ļauj lietotājiem palikt autentificētiem visas sesijas laikā bez nepieciešamības veikt pastāvīgu atkārtotu autentifikāciju, tādējādi uzlabojot savu pieredzi.

Lietotāja sesijas datu pārvaldība, izmantojot sīkfailus un sesijas krātuvi

Lietotāju sesiju pārvaldība ir būtisks aspekts stabilu un drošu React lietojumprogrammu izveidē. Pareiza sesijas datu pārvaldība, izmantojot sīkfailus un sesijas krātuvi, nodrošina vienmērīgu un personalizētu lietotāja pieredzi, vienlaikus saglabājot nepieciešamos drošības pasākumus.

Lietotāja sesijas dati parasti ietver informāciju, kas ir specifiska lietotāja pašreizējai sesijai vai mijiedarbībai ar lietojumprogrammu. Šie dati var atšķirties atkarībā no lietojumprogrammas prasībām un funkcionalitātes, taču parasti tie ietver:

• Ar autentifikāciju saistīta informācija.
• Lietotāja preferences un iestatījumi.
• Lietotāju aktivitātes un vēsture.

Sīkfaili ir teksta faili, kas satur nelielus datu fragmentus tīmekļa pārlūkprogrammas saglabā lietotāja ierīcē. Tos parasti izmanto, lai saglabātu autentifikācijas datus un jebkuru citu personalizētu lietotāja informāciju, ļaujot tīmekļa lietojumprogrammām uzturēt lietotāja sesijas vairākās pārlūkprogrammas sesijās.

No otras puses, sesijas krātuve — līdzīgi vietējai krātuvei— ir klienta puses krātuves mehānisms, ko nodrošina mūsdienu pārlūkprogrammas. Atšķirībā no sīkfailiem, tas attiecas tikai uz noteiktu pārlūkošanas sesiju un ir pieejams tikai tajā pašā cilnē vai logā. Sesijas krātuve piedāvā vienkāršu un vienkāršu veidu, kā saglabāt sesijai raksturīgus datus tīmekļa lietojumprogrammām.

Gan sīkfailiem, gan sesijas krātuvei ir izšķiroša nozīme lietotāja sesijas datu pārvaldībā. Sīkfaili ir lieliski piemēroti situācijās, kad ir nepieciešama datu noturība vairākās sesijās. Turpretim sesijas glabāšana ir izdevīga, ja vēlaties izolēt datus vienas pārlūkošanas sesijas laikā, nodrošinot vieglu un specifisku uzglabāšanas iespēju.

Tagad izpētīsim, kā apstrādāt lietotāja sesiju datus, īpaši koncentrējoties uz autentifikācijas informācijas glabāšanu, izmantojot sīkfailus un sesijas krātuvi.

Izveidojiet reaģēšanas projektu

Lai sāktu, iestatiet React projektu, izmantojot Vite. Pēc tam instalējiet šīs pakotnes savā projektā.

npm instalējiet js-cookie react-router-dom

Ideālā gadījumā pēc tam, kad lietotājs piesakās un viņa akreditācijas dati ir veiksmīgi autentificēti, izmantojot aizmugursistēmas autentifikācijas API, sīkfailos un sesijas krātuvē tiek glabāti autentifikācijas marķieri, sesijas identifikatori vai citi atbilstoši dati lietotāja darbības laikā. sesija.

Šie marķieri vai identifikatori kopā ar papildu datiem, kas tiek glabāti lietotāja pārlūkprogrammā, tiek automātiski saglabāti iekļauti turpmākajos pieprasījumos, kas nosūtīti serverim verifikācijai, pirms lietotājs var piekļūt aizsargātam resursus.

Tādā veidā lietotāja sesija turpinās vairākos pieprasījumos, nodrošinot, ka viņi nemanāmi mijiedarbojas ar lietojumprogrammu, neveicot atkārtotu autentifikāciju katram pieprasījumam.

Jūs varat atrast šī projekta kodu GitHub repozitorijs.

Lietotāja autentifikācijas sesijas datu pārvaldība, izmantojot sīkfailus

Lai parādītu, kā izmantot sīkfailus lietotāju autentifikācijas informācijas glabāšanai, turpiniet un izveidojiet jaunu komponenti/Login.jsx failu mapē src direktoriju. Šajā failā pievienojiet šādu kodu.

1. Veiciet tālāk norādītās importēšanas darbības.

   imports { useState } no'reaģēt';
   imports { useNavigate } no"react-router-dom";
   imports Sīkdatnes no"js-cookie";

2. Izveidojiet funkcionālu komponentu un pievienojiet JSX elementus pieteikšanās veidlapai.

   konst Pieteikšanās = () => {
   konst [lietotājvārds, setUsername] = useState('');
   konst [parole, setPassword] = useState('');
   atgriezties (
   
   
   
    tips="teksts"
    vietturis="Lietotājvārds"
    vērtība={lietotājvārds}
    onChange={(e) => setUsername (e.target.value)}
    />
    tips="parole"
    vietturis="Parole"
    vērtība={parole}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Iesniegt">Pieteikties</button>
    </form>
    );
   };
   eksportētnoklusējuma Pieslēgties;

Tā kā mums nav aizmugursistēmas API, lai autentificētu lietotāja akreditācijas datus, mēs izveidosim funkciju, kas pārbauda lietotāja pieteikšanās veidlapā ievadītos datus, izmantojot testa lietotāja akreditācijas datus. Funkcionālā komponenta iekšpusē pievienojiet šādu kodu.

konst testAuthData = {
 lietotājvārds: 'pārbaude',
 parole: 'pārbaude',
 }; 
konst authenticateUser = (Lietotājvārds Parole) => {
ja (lietotājvārds testAuthData.lietotājvārds && parole testAuthData.password) { 
konst userData = {
 lietotājvārds,
 parole,
 };
konst derīguma termiņš = jaunsDatums(jaunsDatums().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (lietotāja dati), { beidzas: derīguma termiņš });
atgrieztiestaisnība;
 }
atgrieztiesviltus;
 };
konst handLogin = (e) => {
 e.preventDefault();
konst isAuthenticated = authenticateUser (lietotājvārds, parole);
ja (ir autentificēts) {
 pārvietoties('/aizsargāts');
 } cits {
// Rādīt kļūdas ziņojumu vai veikt citas darbības neveiksmīgas autentifikācijas gadījumā
 }
 };

Iekšpusē autentificēt lietotāju funkciju, tā pārbauda, ​​vai norādītais lietotājvārds un parole atbilst testa autentifikācijas datiem. Ja akreditācijas dati sakrīt, tiek izveidots a userData objekts ar lietotājvārdu un paroli. Pēc tam tas iestata sīkfaila derīguma termiņu un saglabā to userData sīkdatnē ar nosaukumu aut izmantojot Cookies.set metodi.

Pēc veiksmīgas autentifikācijas lietotājs novirza uz aizsargātu lapu, jo viņam ir tiesības piekļūt aizsargātajiem resursiem. Saglabājot autentifikācijas informāciju sīkfailā, jūs izveidojat aktīvu lietotāja sesiju, ļaujot turpmākajos pieprasījumos automātiski iekļaut autentifikācijas informāciju.

Šie lietotāja sesijas dati ļauj servera kodam pārbaudīt lietotāja identitāti un atļaut piekļuvi privilēģijām, neprasot lietotājam atkārtoti autentificēties katram pieprasījumam.

Atjauniniet failu App.jsx

Veiciet izmaiņas App.jsx failu, lai apstrādātu lietotāja maršrutēšanu pēc veiksmīgas autentifikācijas

imports { BrowserRouter, Route, Routes, useNavigate } no"react-router-dom";
imports Sīkdatnes no"js-cookie";
imports Pieslēgties no'./components/Login';
konst Aizsargāta lapa = ({ ...atpūta }) => {
konst isAuthenticated = !!Cookies.get('auth');
konst navigēt = useNavigate();
konst handLogout = () => { 
 Cookies.remove('auth');
 pārvietoties('/Pieslēgties'); 
 };
ja (!isAuthenticated) {
 pārvietoties('/Pieslēgties'); 
atgrieztiesnull; // Atgriež nulli, lai neļautu renderēt kaut ko citu
 }
atgriezties (



fonta izmērs: "24 pikseļi", krāsa: 'zils' }}>Sveika, pasaule!</h1>
piemaleAugšā: "10 pikseļi" }} onClick={handleLogout}>
 Izlogoties
 </button>
 </div>
 );
};


konst Lietotne = () => {
atgriezties (


"/protected/*" elements={} />
"/Pieslēgties" elements={} />
 </Routes>
 </BrowserRouter>
 );
};
eksportētnoklusējuma Lietotne;

Iepriekš minētais kods iestata nepieciešamos komponentus un maršrutēšanas loģiku. Tajā ir iekļauta atteikšanās poga, kas, nospiežot, izdzēš autentifikācijas sīkfailu un novirza lietotāju uz pieteikšanās lapu.

Turklāt tas pārbauda autentifikācijas sīkfaila esamību un novirza lietotājus uz pieteikšanās lapu, ja tās nav. Tomēr, ja sīkdatne ir klāt, Aizsargāta lapa komponents veido lapu, kas ir pieejama tikai autentificētiem lietotājiem.

Visbeidzot, palaidiet tālāk norādīto komandu, lai izveidotu izstrādes serveri un pārbaudītu lietojumprogrammu.

npm palaist dev

Pārlūkprogrammā dodieties uz http://127.0.0.1:5173/loginun ievadiet pārbaudes autentifikācijas akreditācijas datus. Pēc veiksmīgas pieteikšanās tiek ģenerēts jauns sīkfails ar sesijas datiem, kas ietver pārbaudes autentifikācijas informāciju.

Tiklīdz sīkfaila derīguma termiņš beidzas vai noklikšķināt uz atteikšanās pogas, sīkfails tiek dzēsts. Šī darbība efektīvi pabeidz aktīvo lietotāja sesiju un izslēdz jūs.

Lietotāja autentifikācijas datu glabāšana, izmantojot sesijas krātuvi

Gan sesijas krātuve, gan sīkfaili darbojas līdzīgi. Lai saglabātu nepieciešamo informāciju pārlūkprogrammas sesijas krātuvē, varat izmantot sessionStorage.setItem metodi.

 sessionStorage.setItem('auth', JSON.stringify (lietotāja dati));

Pievienojot iepriekš minēto paziņojumu autentificēt lietotāju funkcija Pieslēgties komponentu, varat saglabāt lietotāja autentifikācijas datus pārlūkprogrammas sesijas krātuvē.

Sīkfailu un sesiju uzglabāšanas papildu izmantošanas gadījumu izpēte

Šajā rokasgrāmatā ir uzsvērts, kā izmantot sīkfailus un sesijas krātuvi, lai saglabātu lietotāju autentifikācijas akreditācijas datus. Tomēr sīkfaili un sesiju glabāšana piedāvā plašāku iespēju klāstu, ne tikai autentifikācijas informācijas glabāšanu.

Izmantojot šīs funkcijas, varat pārvaldīt papildu sesijas datus, tādējādi nodrošinot drošāku un personalizētāku lietotāja pieredzi.