Vue Academy · Lezione

Chiamate API autenticate con gli interceptor Axios

Interceptor delle richieste per l'header Authorization, interceptor delle risposte per 401 → refresh → retry.

Lezione 3 di 413 passaggi

Chiamate API autenticate con gli interceptor Axios è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Il pattern degli interceptor

Anziché aggiungere gli header di autenticazione e gestire i 401 in ogni chiamata, gli interceptor di Axios centralizzano questa logica. Un interceptor delle richieste aggiunge il token; un interceptor delle risposte gestisce in modo trasparente la scadenza e il refresh.

Creare l'istanza Axios

Crei un'istanza dedicata con l'URL di base dell'API e withCredentials, in modo che il cookie httpOnly di refresh venga inviato all'endpoint di refresh.

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  withCredentials: true // send cookies
})

export default api

Conservare il token di accesso in memoria

Conservi il token di accesso in una variabile del modulo (o in uno store Pinia) anziché in localStorage. Una semplice coppia di funzioni di accesso consente agli interceptor di leggerlo e aggiornarlo.

let accessToken = null

export function setAccessToken(t) { accessToken = t }
export function getAccessToken() { return accessToken }

Interceptor delle richieste: aggiungere l'header

L'interceptor delle richieste viene eseguito prima di ogni richiesta e aggiunge Authorization: Bearer <token> quando esiste un token.

api.interceptors.request.use((config) => {
  const token = getAccessToken()
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
})

Interceptor delle risposte: intercettare 401

L'interceptor delle risposte lascia passare senza modifiche le risposte riuscite, ma in caso di 401 avvia il flusso di refresh.

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const original = error.config
    if (error.response?.status === 401 && !original._retried) {
      // ... refresh and retry (next scenes)
    }
    return Promise.reject(error)
  }
)

Prevenire i loop di retry infiniti

Contrassegni la richiesta non riuscita con un flag come _retried, così viene riprovata una sola volta. Se anche il refresh restituisce 401, la richiesta viene rifiutata invece di entrare in un loop infinito.

if (error.response?.status === 401 && !original._retried) {
  original._retried = true
  // attempt refresh exactly once for this request
}

Chiamare l'endpoint di refresh

In caso di 401, esegua una richiesta POST a /auth/refresh. Il browser invia automaticamente il cookie di refresh httpOnly; il server risponde con un nuovo token di accesso.

const { data } = await api.post('/auth/refresh')
setAccessToken(data.accessToken)

Riprovare la richiesta originale

Dopo il refresh, aggiorni l'header nella configurazione originale e la esegua nuovamente. L'utente non si accorge dell'interruzione.

original.headers.Authorization = 'Bearer ' + data.accessToken
return api(original) // retry the original request

Gestire i 401 simultanei

Se molte richieste falliscono contemporaneamente, non è consigliabile eseguire N chiamate di refresh in parallelo. Condivida un'unica promise di refresh in corso: le richieste in coda la attendono e poi vengono riprovate con il nuovo token.

let refreshing = null

function refreshOnce() {
  if (!refreshing) {
    refreshing = api.post('/auth/refresh')
      .finally(() => { refreshing = null })
  }
  return refreshing
}

Arrendersi: forzare il logout

Se il refresh fallisce (token di refresh scaduto o non valido), elimini il token in memoria e reindirizzi alla pagina di login. Questo è l'unico punto dell'app che gestisce la scadenza della sessione.

try {
  await refreshOnce()
} catch {
  setAccessToken(null)
  router.push('/login')
  return Promise.reject(error)
}

Usare l'istanza nei componenti

I componenti importano semplicemente l'istanza api configurata ed effettuano le chiamate. Gli header di autenticazione, il refresh e il retry sono completamente trasparenti al codice dei componenti.

<script setup>
import api from '@/lib/api'
import { ref, onMounted } from 'vue'

const profile = ref(null)
onMounted(async () => {
  const { data } = await api.get('/me')
  profile.value = data
})
</script>

Verifica rapida

Verifichi la sua comprensione degli interceptor di Axios.

Rispondi nella lezione interattiva

Riepilogo

Ha imparato a effettuare chiamate autenticate con gli interceptor:

L'interceptor delle richieste aggiunge Authorization: Bearer usando il token in memoria
L'interceptor delle risposte intercetta 401 ed esegue il refresh
Un flag _retried riprova la richiesta originale esattamente una volta
POST /auth/refresh usa il cookie httpOnly per ottenere un nuovo token
Condivida una sola promise di refresh per i 401 simultanei; forzi il logout in caso di errore

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 42
Lezioni: 156

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Chiamate API autenticate con gli interceptor Axios» è gratuita?

Sì — il testo completo di «Chiamate API autenticate con gli interceptor Axios» è 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 «Chiamate API autenticate con gli interceptor Axios»?

Interceptor delle richieste per l'header Authorization, interceptor delle risposte per 401 → refresh → retry. 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 3 di 4.

Quanto tempo richiede la lezione «Chiamate API autenticate con gli interceptor Axios»?

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

Backend Fastify per SPA Vue
Autenticazione JWT: login e refresh
Chiamate API autenticate con gli interceptor Axios
Deployment in produzione di Vue full-stack

← Torna a Vue Academy