L'autenticazione funge da barriera protettiva per le applicazioni software, verificando l'identità degli utenti e concedendo l'accesso alle risorse protette. Tuttavia, richiedere agli utenti di autenticarsi ripetutamente, specialmente all'interno di una singola sessione, può portare a frustrazione, ostacolare la produttività e rovinare la loro esperienza complessiva.

Per superare questa sfida, è possibile utilizzare i cookie e l'archiviazione della sessione per conservare i dati di autenticazione dell'utente e altri dati personalizzati informazioni—consentendo agli utenti di rimanere autenticati durante una sessione senza la necessità di una riautenticazione costante, migliorando di conseguenza la loro esperienza.

Gestione dei dati della sessione utente utilizzando i cookie e la memorizzazione della sessione

La gestione delle sessioni utente è un aspetto cruciale della creazione di applicazioni React robuste e sicure. La corretta gestione dei dati della sessione utilizzando i cookie e l'archiviazione della sessione garantisce un'esperienza utente fluida e personalizzata pur mantenendo le necessarie misure di sicurezza.

I dati della sessione utente in genere includono informazioni specifiche per la sessione corrente di un utente o l'interazione con un'applicazione. Questi dati possono variare a seconda dei requisiti e della funzionalità dell'applicazione, ma comunemente includono quanto segue:

• Informazioni relative all'autenticazione.
• Preferenze e impostazioni dell'utente.
• Attività e cronologia degli utenti.

I cookie sono file di testo che contengono piccole porzioni di dati memorizzati dai browser Web sul dispositivo dell'utente. Sono comunemente utilizzati per archiviare i dati di autenticazione e qualsiasi altra informazione utente personalizzata, consentendo alle applicazioni Web di mantenere le sessioni utente su più sessioni del browser.

D'altra parte, archiviazione della sessione, simile all'archiviazione locale—è un meccanismo di archiviazione lato client fornito dai browser moderni. A differenza dei cookie, è limitato a una specifica sessione di navigazione ed è accessibile solo all'interno della stessa scheda o finestra. L'archiviazione della sessione offre un modo semplice e diretto per archiviare i dati specifici della sessione per le applicazioni web.

Sia i cookie che l'archiviazione della sessione svolgono un ruolo cruciale nella gestione dei dati della sessione utente. I cookie sono ottimi in situazioni in cui è richiesta la persistenza dei dati su più sessioni. Al contrario, l'archiviazione della sessione è vantaggiosa quando si desidera isolare i dati all'interno di una singola sessione di navigazione, fornendo un'opzione di archiviazione leggera e specifica.

Ora, esploriamo come gestire i dati della sessione utente, concentrandoci in particolare sull'archiviazione delle informazioni di autenticazione utilizzando i cookie e l'archiviazione della sessione.

Imposta un progetto React

Per iniziare, impostare un progetto React utilizzando Vite. Successivamente, installa questi pacchetti nel tuo progetto.

npm install js-cookie react-router-dom

Idealmente, dopo che un utente ha effettuato l'accesso e le sue credenziali sono state autenticate con successo da un'API di autenticazione back-end, i cookie e l'archiviazione della sessione memorizzano i token di autenticazione, gli identificatori di sessione o qualsiasi altro dato rilevante durante l'utilizzo dell'utente sessione.

Questi token o identificatori insieme ai dati aggiuntivi memorizzati nel browser dell'utente sono automaticamente inclusi nelle successive richieste fatte al server per la verifica prima che un utente possa accedere protetto risorse.

In questo modo, la sessione di un utente persiste su più richieste, assicurando che interagiscano perfettamente con l'applicazione senza dover ripetere l'autenticazione per ogni richiesta.

Puoi trovare il codice di questo progetto in questo Deposito GitHub.

Gestione dei dati della sessione di autenticazione dell'utente mediante i cookie

Per dimostrare come utilizzare i cookie per memorizzare le informazioni di autenticazione degli utenti, procedere e creare un nuovo file componenti/Login.jsx file nel src directory. All'interno di questo file, aggiungi il seguente codice.

1. Effettua le seguenti importazioni.

   importare { usaStato } da'reagire';
   importare {usaNavigare} da'reagire-router-dom';
   importare Biscotti da'js-cookie';

2. Crea un componente funzionale e aggiungi elementi JSX per un modulo di accesso.

   cost Accedi = () => {
   cost [nomeutente, setUsername] = useState('');
   cost [password, impostapassword] = useState('');
   ritorno (
   
   
   
    tipo="testo"
    segnaposto="Nome utente"
    valore={nomeutente}
    onChange={(e) => setUsername (e.target.value)}
    />
    tipo="parola d'ordine"
    segnaposto="Parola d'ordine"
    valore={password}
    onChange={(e) => impostaPassword (e.target.value)}
    />
   "invia">Accedi</button>
    </form>
    );
   };
   esportarepredefinito Login;

Poiché non disponiamo di un'API di back-end per autenticare le credenziali dell'utente, creeremo una funzione che verifica i dati inseriti dall'utente nel modulo di accesso utilizzando le credenziali dell'utente di prova. All'interno del componente funzionale, aggiungi il seguente codice.

cost testAuthData = {
 nome utente: 'test',
 parola d'ordine: 'test',
 }; 
cost autenticateUtente = (nome utente, password) => {
Se (nome utente testAuthData.nomeutente && password testAuthData.password) { 
cost dati utente = {
 nome utente,
 parola d'ordine,
 };
cost scadenzaTempo = nuovoData(nuovoData().getTime() + 60000);
 Cookie.set('autenticazione', JSON.stringify (datiutente), { scade: data di scadenza });
ritornoVERO;
 }
ritornofalso;
 };
cost handleLogin = (e) => {
 e.preventDefault();
cost isAuthenticated = authenticateUser (nome utente, password);
Se (è autenticato) {
 navigare('/protetto');
 } altro {
// Mostra il messaggio di errore o esegue altre azioni per l'autenticazione fallita
 }
 };

Dentro il autenticateUtente funzione, controlla se il nome utente e la password forniti corrispondono ai dati di autenticazione del test. Se le credenziali corrispondono, crea un file dati utente oggetto con il nome utente e la password. Quindi imposta un tempo di scadenza per il cookie e memorizza il file dati utente in un cookie denominato aut usando il Cookies.set metodo.

Dopo l'autenticazione riuscita, un utente reindirizza a una pagina protetta poiché è autorizzato ad accedere alle risorse protette. Memorizzando le informazioni di autenticazione in un cookie, stabilisci una sessione utente attiva, consentendo alle richieste successive di includere automaticamente i dettagli di autenticazione.

Questi dati della sessione utente consentono al codice del server di verificare l'identità dell'utente e autorizzare l'accesso ai privilegi senza richiedere all'utente di riautenticarsi per ogni richiesta.

Aggiorna il file App.jsx

Apportare modifiche al App.jsx file per gestire il routing degli utenti dopo l'autenticazione riuscita

importare {BrowserRouter, Rotta, Rotte, useNavigate} da'reagire-router-dom';
importare Biscotti da'js-cookie';
importare Login da'./componenti/Accesso';
cost Pagina protetta = ({ ...riposo }) => {
cost isAuthenticated = !!Cookies.get('autenticazione');
cost naviga = usaNaviga();
cost handleLogout = () => { 
 Cookie.remove('autenticazione');
 navigare('/login'); 
 };
Se (!isAuthenticated) {
 navigare('/login'); 
ritornonullo; // Restituisce null per impedire il rendering di qualcos'altro
 }
ritorno (



dimensione del font: '24px', colore: 'blu' }}>Ciao, Mondo!</h1>
marginTop: '10px' }} onClick={handleLogout}>
 Disconnettersi
 </button>
 </div>
 );
};


cost Applicazione = () => {
ritorno (


"/protetto/*" elemento={} />
"/login" elemento={} />
 </Routes>
 </BrowserRouter>
 );
};
esportarepredefinito Applicazione;

Il codice precedente imposta i componenti necessari e la logica di routing. Include un pulsante di logout che, se premuto, cancella il cookie di autenticazione e reindirizza l'utente alla pagina di login.

Inoltre, verifica la presenza del cookie di autenticazione e reindirizza gli utenti alla pagina di accesso se è assente. Tuttavia, se il cookie è presente, il Pagina protetta componente rende una pagina che è accessibile esclusivamente agli utenti autenticati.

Infine, esegui il comando seguente per avviare il server di sviluppo per testare l'applicazione.

npm esegue lo sviluppo

Sul tuo browser, vai a http://127.0.0.1:5173/logine immetti le credenziali di autenticazione del test. Dopo aver effettuato correttamente l'accesso, viene generato un nuovo cookie contenente i dati della sessione, che include le informazioni di autenticazione del test.

Una volta scaduto il cookie o quando si fa clic sul pulsante di logout, il cookie viene eliminato. Questa azione termina in modo efficace la sessione utente attiva e ti disconnette.

Archiviazione dei dati di autenticazione dell'utente mediante l'archiviazione della sessione

Sia l'archiviazione della sessione che i cookie funzionano in modo simile. Per memorizzare le informazioni necessarie nella memoria della sessione del browser, è possibile utilizzare il sessionStorage.setItem metodo.

 sessionStorage.setItem('autenticazione', JSON.stringify (datiutente));

Aggiungendo la dichiarazione sopra all'interno del file autenticateUtente funzione nel Login componente, è possibile memorizzare i dati di autenticazione dell'utente nella memoria di sessione del browser.

Esplorazione di ulteriori casi d'uso per i cookie e l'archiviazione delle sessioni

Questa guida ha evidenziato come utilizzare i cookie e l'archiviazione della sessione per memorizzare le credenziali di autenticazione degli utenti. Tuttavia, i cookie e l'archiviazione della sessione offrono una gamma più ampia di funzionalità oltre alla memorizzazione delle informazioni di autenticazione.

Sfruttando queste funzionalità, puoi gestire dati di sessione aggiuntivi, portando a un'esperienza utente più sicura e personalizzata.