0Pricing
Vue Academy · Leçon

Appels d’API authentifiés avec les intercepteurs Axios

Intercepteur de requête pour l’en-tête Authorization, intercepteur de réponse pour 401 → actualisation → nouvelle tentative

Appels d’API authentifiés avec les intercepteurs Axios est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Le modèle des intercepteurs

Plutôt que d’ajouter les en-têtes d’authentification et de gérer les erreurs 401 dans chaque appel, les intercepteurs d’Axios centralisent cette logique. Un intercepteur de requête ajoute le jeton ; un intercepteur de réponse gère l’expiration et le renouvellement de manière transparente.

Créer l’instance Axios

Créez une instance dédiée avec l’URL de base de l’API et withCredentials afin que le cookie de renouvellement httpOnly soit envoyé à la route de renouvellement.

import axios from 'axios'

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

export default api

Conserver le jeton d’accès en mémoire

Conservez le jeton d’accès dans une variable de module (ou dans un magasin Pinia) plutôt que dans localStorage. Une petite paire de fonctions d’accès permet aux intercepteurs de le lire et de le mettre à jour.

let accessToken = null

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

Intercepteur de requête : ajouter l’en-tête

L’intercepteur de requête s’exécute avant chaque requête et ajoute Authorization: Bearer <token> lorsqu’un jeton existe.

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

Intercepteur de réponse : intercepter l’erreur 401

L’intercepteur de réponse laisse passer les réponses réussies sans les modifier, mais déclenche le processus de renouvellement en cas d’erreur 401.

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)
  }
)

Éviter les boucles de nouvelle tentative infinies

Marquez la requête échouée avec un indicateur comme _retried afin qu’elle ne soit réessayée qu’une seule fois. Si le renouvellement lui-même renvoie une erreur 401, la requête est rejetée au lieu de boucler indéfiniment.

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

Appeler la route de renouvellement

En cas d’erreur 401, envoyez une requête POST à /auth/refresh. Le navigateur envoie automatiquement le cookie de renouvellement httpOnly ; le serveur répond avec un nouveau jeton d’accès.

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

Réessayer la requête original

Après le renouvellement, mettez à jour l’en-tête dans la configuration original et rejouez-la. L’utilisateur ne voit jamais l’interruption.

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

Gérer les erreurs 401 simultanées

Si de nombreuses requêtes échouent en même temps, vous ne voulez pas lancer N appels de renouvellement en parallèle. Partagez une seule promesse de renouvellement en cours ; les requêtes en attente l’attendent, puis réessaient avec le nouveau jeton.

let refreshing = null

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

Abandonner : forcer la déconnexion

Si le renouvellement échoue (jeton de renouvellement expiré ou invalide), effacez le jeton conservé en mémoire et redirigez l’utilisateur vers la connexion. C’est l’unique endroit qui gère l’expiration de session pour toute l’application.

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

Utiliser l’instance dans les composants

Les composants importent simplement l’instance api configurée et effectuent leurs appels. Les en-têtes d’authentification, le renouvellement et les nouvelles tentatives sont entièrement transparents pour le code des composants.

<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>

Vérification rapide

Testez votre compréhension des intercepteurs Axios.

Récapitulatif

Vous avez appris à effectuer des appels authentifiés avec des intercepteurs :

  • L’intercepteur de requête ajoute Authorization: Bearer à partir du jeton conservé en mémoire
  • L’intercepteur de réponse intercepte l’erreur 401 et effectue le renouvellement
  • Un indicateur _retried permet de réessayer la requête original exactement une fois
  • POST /auth/refresh utilise le cookie httpOnly pour obtenir un nouveau jeton
  • Partagez une seule promesse de renouvellement pour les erreurs 401 simultanées et forcez la déconnexion en cas d’échec

Questions Fréquemment Posées

La leçon « Appels d’API authentifiés avec les intercepteurs Axios » est-elle gratuite ?

Oui — le texte complet de « Appels d’API authentifiés avec les intercepteurs Axios » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Appels d’API authentifiés avec les intercepteurs Axios » ?

Intercepteur de requête pour l’en-tête Authorization, intercepteur de réponse pour 401 → actualisation → nouvelle tentative Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Appels d’API authentifiés avec les intercepteurs Axios » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Backend Fastify pour les SPA Vue
  2. Authentification JWT : connexion et actualisation
  3. Appels d’API authentifiés avec les intercepteurs Axios
  4. Déployer une application Vue full-stack en production
← Retour à Vue Academy