Vue Academy · Lezione

Pattern per un'autenticazione sicura

Archiviazione dei token (memoria vs localStorage vs cookie httpOnly), silent refresh, logout alla chiusura della scheda.

Pattern per un'autenticazione sicura è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

I token e dove vengono memorizzati

Le SPA usano token per l'autenticazione, ma il luogo in cui vengono memorizzati determina l'esposizione a XSS e CSRF. Il pattern moderno separa un token di accesso di breve durata da un token di aggiornamento di lunga durata, memorizzandoli in modi diversi.

Il problema di localStorage

Memorizzare i token in localStorage è comodo, ma pericoloso: qualsiasi script inserito tramite XSS può leggerli ed esfiltrare il token. Eviti di archiviare qui le credenziali.

// AVOID
localStorage.setItem("token", accessToken);

Token di accesso in memoria

Mantenga il token di accesso in una variabile JavaScript o in un ref reattivo. Scompare al ricaricamento, quindi un attacco XSS riuscito ha una finestra molto più breve e non rimane nulla sul disco.

import { ref } from "vue";

export const accessToken = ref(null);

Token di aggiornamento in un cookie httpOnly

Il token di aggiornamento risiede in un cookie HttpOnly, Secure, SameSite. JavaScript non può leggerlo, quindi XSS non può sottrarlo, e il browser lo invia solo al suo endpoint di autenticazione.

Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/auth

Allegare il token di accesso

Un interceptor delle richieste Axios aggiunge il token di accesso in memoria all'intestazione Authorization a ogni chiamata.

api.interceptors.request.use((config) => {
  if (accessToken.value) {
    config.headers.Authorization = "Bearer " + accessToken.value;
  }
  return config;
});

Rilevare la scadenza: il 401

Quando il token di accesso scade, il server risponde con 401 Unauthorized. Un interceptor delle risposte intercetta questo caso per attivare il rinnovo.

api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401) {
      // attempt refresh
    }
    return Promise.reject(error);
  }
);

Rinnovare il token

In caso di 401, chiami l'endpoint di rinnovo. Il browser invia automaticamente il cookie di aggiornamento httpOnly (withCredentials) e il server restituisce un nuovo token di accesso.

const { data } = await axios.post("/auth/refresh", null, {
  withCredentials: true
});
accessToken.value = data.accessToken;

Ripetere la richiesta originale

Dopo il refresh, ripeta la richiesta originale non riuscita con il nuovo token, così l'utente non si accorgerà di nulla.

async (error) => {
  const original = error.config;
  if (error.response?.status === 401 && !original._retry) {
    original._retry = true;
    const { data } = await axios.post("/auth/refresh", null, { withCredentials: true });
    accessToken.value = data.accessToken;
    original.headers.Authorization = "Bearer " + data.accessToken;
    return api(original);
  }
  return Promise.reject(error);
}

Evitare raffiche di refresh

Se molte richieste restituiscono 401 contemporaneamente, le accodi dietro a un'unica operazione di refresh in corso, così non chiamerà ripetutamente l'endpoint di refresh.

let refreshing = null;
function refresh() {
  if (!refreshing) {
    refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
      .finally(() => { refreshing = null; });
  }
  return refreshing;
}

Eseguire il logout

Al momento del logout, cancelli il token in memoria e chiami un endpoint che cancella il cookie di refresh lato server.

async function logout() {
  accessToken.value = null;
  await axios.post("/auth/logout", null, { withCredentials: true });
}

Combinare con la protezione CSRF

Poiché il cookie di refresh viene inviato automaticamente, protegga quell'endpoint con SameSite e token CSRF, proprio come le altre route autenticate tramite cookie.

Verifica rapida

Dove vanno archiviati rispettivamente il token di accesso e il token di refresh?

Riepilogo

Conservi il token di accesso in un ref in memoria (mai in localStorage) e il token di refresh in un cookie HttpOnly. Un interceptor delle richieste aggiunge il bearer token; un interceptor delle risposte intercetta 401, chiama l'endpoint di refresh, aggiorna il token e ripete la richiesta originale, eliminando i refresh concorrenti duplicati e abbinando il tutto alle difese CSRF.

Domande Frequenti

La lezione «Pattern per un'autenticazione sicura» è gratuita?

Sì — il testo completo di «Pattern per un'autenticazione sicura» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Pattern per un'autenticazione sicura»?

Archiviazione dei token (memoria vs localStorage vs cookie httpOnly), silent refresh, logout alla chiusura della scheda. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Pattern per un'autenticazione sicura»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy