JavaScript: salvare un JSON Web Token (JWT) nel local storage e usarlo con le Fetch API

Il JSON Web Token (JWT) è un meccanismo di autenticazione basato su token che consente di trasmettere informazioni di sicurezza tra le parti in modo sicuro e affidabile. Quando si utilizza un JWT per autenticare un utente, è importante salvare il token in modo sicuro nel client-side, ad esempio nel localStorage del browser. In questo modo, il token può essere utilizzato per le successive richieste senza la necessità di autenticarsi nuovamente.

Per salvare un JWT nel localStorage, è possibile utilizzare il seguente codice JavaScript:

localStorage.setItem('jwtToken', jwt);

dove jwtToken è il nome della chiave utilizzata per salvare il token nel localStorage e jwt è il valore del token.

Una volta salvato il token, è possibile utilizzarlo nelle richieste HTTP tramite le Fetch API di JavaScript. Per fare ciò, è necessario recuperare il token dal localStorage e aggiungerlo all'header Authorization della richiesta. Il seguente codice illustra come fare ciò:

'use strict';

const jwt = localStorage.getItem('jwtToken');

fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${jwt}`
  }
})
.then(response => {
  // gestione della risposta
})
.then(resp => {
    console.log(resp.json());
})
.catch(error => {
  // gestione dell'errore
});

In questo esempio, il token viene recuperato dal localStorage utilizzando il metodo getItem(). Successivamente, il token viene aggiunto all'header Authorization della richiesta utilizzando il prefisso Bearer. Infine, la richiesta viene eseguita tramite la Fetch API e il risultato viene gestito come sempre.

In sintesi, salvare un JWT nel localStorage e utilizzarlo con le Fetch API di JavaScript è un processo semplice ma importante per garantire l'autenticazione degli utenti. Salvando il token in modo sicuro e utilizzandolo correttamente nelle richieste HTTP, è possibile fornire una maggiore sicurezza alle applicazioni web.