Autentificarea servește ca o barieră de protecție pentru aplicațiile software, verificând identitatea utilizatorilor și acordând acces la resursele protejate. Cu toate acestea, solicitarea utilizatorilor să se autentifice în mod repetat, în special în cadrul unei singure sesiuni, poate duce la frustrare, poate împiedica productivitatea și le poate distruge experiența generală.

Pentru a depăși această provocare, puteți utiliza cookie-uri și stocarea sesiunii pentru a persista datele de autentificare a utilizatorilor și alte date personalizate informații – permițând utilizatorilor să rămână autentificați pe parcursul unei sesiuni fără a fi nevoie de o reautentificare constantă, în consecință, îmbunătățind experiența lor.

Gestionarea datelor despre sesiunea utilizatorului utilizând cookie-uri și stocarea sesiunii

Gestionarea sesiunilor utilizatorilor este un aspect crucial al construirii de aplicații React robuste și sigure. Gestionarea corectă a datelor de sesiune folosind cookie-uri și stocarea sesiunii asigură o experiență de utilizator fluidă și personalizată, menținând în același timp măsurile de securitate necesare.

Datele despre sesiunea utilizatorului includ de obicei informații care sunt specifice sesiunii sau interacțiunii curente a unui utilizator cu o aplicație. Aceste date pot varia în funcție de cerințele și funcționalitatea aplicației, dar includ de obicei următoarele:

• Informații legate de autentificare.
• Preferințele și setările utilizatorului.
• Activitatea și istoricul utilizatorului.

Cookie-urile sunt fișiere text care conțin fragmente mici de date stocate de browserele web pe dispozitivul utilizatorului. Ele sunt utilizate în mod obișnuit pentru a stoca date de autentificare și orice alte informații personalizate despre utilizator, permițând aplicațiilor web să mențină sesiunile utilizatorilor în mai multe sesiuni de browser.

Pe de altă parte, stocare de sesiune — similar cu stocarea locală—este un mecanism de stocare pe partea clientului oferit de browserele moderne. Spre deosebire de cookie-uri, acesta este limitat la o anumită sesiune de navigare și este accesibil doar în aceeași filă sau fereastră. Stocarea sesiunii oferă o modalitate simplă și directă de a stoca date specifice sesiunii pentru aplicații web.

Atât modulele cookie, cât și stocarea sesiunii joacă un rol crucial în gestionarea datelor despre sesiunile utilizatorilor. Cookie-urile sunt excelente în situațiile în care este necesară persistența datelor în mai multe sesiuni. În schimb, stocarea sesiunii este avantajoasă atunci când doriți să izolați datele într-o singură sesiune de navigare, oferind o opțiune de stocare ușoară și specifică.

Acum, să explorăm cum să gestionăm datele despre sesiunile utilizatorului, concentrându-ne în mod special pe stocarea informațiilor de autentificare folosind cookie-uri și stocarea sesiunii.

Configurați un proiect React

Pentru a incepe, configurați un proiect React folosind Vite. Apoi, instalați aceste pachete în proiectul dvs.

npm instalează js-cookie react-router-dom

În mod ideal, după ce un utilizator se conectează și acreditările sale sunt autentificate cu succes de un API de autentificare backend, cookie-urile și stocarea sesiunii stochează jetoane de autentificare, identificatori de sesiune sau orice alte date relevante în timpul sesiune.

Aceste jetoane sau identificatori împreună cu datele suplimentare stocate în browserul utilizatorului sunt automat incluse în cererile ulterioare făcute către server pentru verificare înainte ca un utilizator să poată accesa protejat resurse.

În acest fel, sesiunea unui utilizator persistă în mai multe solicitări, asigurându-se că interacționează perfect cu aplicația, fără a fi nevoie să se autentifice din nou pentru fiecare solicitare.

Puteți găsi codul acestui proiect în aceasta Depozitul GitHub.

Gestionarea datelor sesiunii de autentificare a utilizatorilor folosind module cookie

Pentru a demonstra cum să utilizați module cookie pentru a stoca informațiile de autentificare ale utilizatorilor, continuați și creați unul nou componente/Login.jsx dosar în src director. În interiorul acestui fișier, adăugați următorul cod.

1. Efectuați următoarele importuri.

   import { useState } din'reacţiona';
   import { useNavigate } din„react-router-dom”;
   import Cookie-uri din„js-cookie”;

2. Creați o componentă funcțională și adăugați elemente JSX pentru un formular de conectare.

   const Autentificare = () => {
   const [username, setUsername] = useState('');
   const [parolă, setPassword] = useState('');
   întoarcere (
   
   
   
    tip="text"
    substituent="Nume de utilizator"
    valoare={nume utilizator}
    onChange={(e) => setUsername (e.target.value)}
    />
    tip="parola"
    substituent="Parola"
    valoare={parolă}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Trimite">Autentificare</button>
    </form>
    );
   };
   exportMod implicit Log in;

Deoarece nu avem un API de backend pentru a autentifica acreditările utilizatorului, vom crea o funcție care verifică datele introduse de utilizator în formularul de conectare folosind acreditările de utilizator de testare. În interiorul componentei funcționale, adăugați următorul cod.

const testAuthData = {
 nume de utilizator: 'Test',
 parola: 'Test',
 }; 
const authenticateUser = (nume utilizator, parola) => {
dacă (nume utilizator testAuthData.nume utilizator și& parola testAuthData.parolă) { 
const userData = {
 nume de utilizator,
 parola,
 };
const expirationTime = nouData(nouData().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (userData), { expiră: data expirarii });
întoarcereAdevărat;
 }
întoarcerefals;
 };
const handleLogin = (e) => {
 e.preventDefault();
const isAuthenticated = authenticateUser (nume utilizator, parola);
dacă (este autentificat) {
 naviga('/protejat');
 } altfel {
// Afișează mesajul de eroare sau efectuează alte acțiuni pentru autentificarea eșuată
 }
 };

În interiorul authenticateUser funcția, verifică dacă numele de utilizator și parola furnizate se potrivesc cu datele de autentificare de testare. Dacă acreditările se potrivesc, se creează un datele utilizatorului obiect cu numele de utilizator și parola. Apoi setează un timp de expirare pentru cookie și stochează datele utilizatorului într-un cookie numit auth folosind Cookies.set metodă.

După autentificarea cu succes, un utilizator redirecționează către o pagină protejată, deoarece este autorizat să acceseze resursele protejate. Prin stocarea informațiilor de autentificare într-un cookie, stabiliți o sesiune de utilizator activă, permițând solicitărilor ulterioare să includă automat detaliile de autentificare.

Datele acestei sesiuni de utilizator permit codului serverului să verifice identitatea utilizatorului și să autorizeze accesul la privilegii fără a solicita utilizatorului să se autentifice din nou pentru fiecare solicitare.

Actualizați fișierul App.jsx

Faceți modificări la App.jsx fișier pentru a gestiona rutarea utilizatorului după autentificarea cu succes

import { BrowserRouter, Route, Routes, useNavigate } din„react-router-dom”;
import Cookie-uri din„js-cookie”;
import Log in din„./components/Login”;
const ProtectedPage = ({ ...odihnă }) => {
const isAuthenticated = !!Cookies.get('auth');
const navigate = foloseșteNavigate();
const handleLogout = () => { 
 Cookies.remove('auth');
 naviga('/log in'); 
 };
dacă (! este autentificat) {
 naviga('/log in'); 
întoarcerenul; // Returnează null pentru a preveni redarea a altceva
 }
întoarcere (



marimea fontului: „24px”, culoare: 'albastru' }}>Bună ziua, lume!</h1>
marginTop: „10px” }} onClick={handleLogout}>
 Deconectare
 </button>
 </div>
 );
};


const Aplicație = () => {
întoarcere (


"/protejat/*" element={} />
"/log in" element={} />
 </Routes>
 </BrowserRouter>
 );
};
exportMod implicit Aplicație;

Codul de mai sus stabilește componentele necesare și logica de rutare. Include un buton de deconectare care, atunci când este apăsat, șterge cookie-ul de autentificare și redirecționează utilizatorul către pagina de autentificare.

În plus, verifică prezența cookie-ului de autentificare și redirecționează utilizatorii către pagina de autentificare dacă acesta este absent. Cu toate acestea, dacă cookie-ul este prezent, Pagina protejată componenta redă o pagină care este accesibilă exclusiv utilizatorilor autentificați.

În cele din urmă, rulați comanda de mai jos pentru a porni serverul de dezvoltare pentru a testa aplicația.

npm run dev

În browser, navigați la http://127.0.0.1:5173/loginși introduceți acreditările de autentificare de testare. După conectarea cu succes, este generat un nou cookie care conține datele sesiunii, care include informațiile de autentificare de testare.

Odată ce cookie-ul expiră sau când faceți clic pe butonul de deconectare, cookie-ul este șters. Această acțiune încheie efectiv sesiunea de utilizator activ și vă deconectați.

Stocarea datelor de autentificare a utilizatorului utilizând stocarea sesiunii

Atât stocarea sesiunii, cât și cookie-urile funcționează în mod similar. Pentru a stoca informațiile necesare în stocarea sesiunii a browserului, puteți utiliza sessionStorage.setItem metodă.

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

Adăugând declarația de mai sus în interiorul authenticateUser funcţia în Log in componentă, puteți stoca datele de autentificare ale utilizatorului în stocarea sesiunii a browserului.

Explorarea cazurilor de utilizare suplimentare pentru cookie-uri și stocarea sesiunii

Acest ghid a evidențiat cum să utilizați cookie-urile și stocarea sesiunii pentru a stoca acreditările de autentificare ale utilizatorilor. Cu toate acestea, cookie-urile și stocarea sesiunii oferă o gamă mai largă de capabilități dincolo de stocarea informațiilor de autentificare.

Utilizând aceste funcții, puteți gestiona date suplimentare de sesiune, ceea ce duce la o experiență de utilizator mai sigură și personalizată.