Étape 9 — Configurer Axios et les variables d'environnement

Objectifs

• Comprendre les limites de fetch() brut (pas de base URL, boilerplate, pas d'intercepteurs)
• Installer et configurer Axios avec axios.create()
• Utiliser les variables d'environnement (.env) pour externaliser l'URL de l'API
• Sécuriser le projet avec .env.example et .gitignore

Prérequis — Point de départ

Cette étape nécessite d'avoir terminé les étapes 1 à 8 (séquences 1-2). Si votre code n'est pas à jour, vous pouvez repartir de la branche etape-9-start :

# Ajouter le dépôt du prof (une seule fois)
git remote add prof https://github.com/fallinov/esig-141-pokedex-vuetify.git
# Récupérer les branches et basculer
git fetch prof
git checkout -b etape-9-start prof/etape-9-start
npm install

Voir la branche sur GitHub

Contexte

Jusqu'ici, chaque appel API utilise fetch() avec l'URL complète en dur :

const response = await fetch('http://localhost:3535/pokemons')

Cela pose plusieurs problèmes :

Problème	Explication
URL en dur	Si l'URL change, il faut modifier chaque fichier
Pas de base URL	On répète http://localhost:3535 partout
Pas d'intercepteurs	Impossible d'ajouter automatiquement un token d'authentification
Boilerplate	Il faut écrire response.json() à chaque fois
Pas de gestion d'erreur centralisée	Chaque appel doit gérer ses propres erreurs

Axios résout tous ces problèmes avec un client HTTP configuré une seule fois.

Encart oral — Pourquoi un client HTTP dédié ?

fetch() est natif et fonctionne bien pour des cas simples. Mais dans un vrai projet, on a besoin de configurer des headers par défaut, une base URL, des intercepteurs (pour l'auth, les erreurs, etc.). Axios fait tout cela en une seule configuration.

Architecture visée

Tâches

1. Installer Axios

Dans le terminal du projet Pokédex :

npm install axios

2. Créer le fichier .env

Créez un fichier .env à la racine du projet (au même niveau que package.json) :

VITE_API_URL=http://localhost:3535

Préfixe VITE_ obligatoire

Avec Vite, seules les variables préfixées par VITE_ sont accessibles dans le code côté client via import.meta.env. Une variable sans ce préfixe (ex: API_URL) sera invisible dans l'application.

3. Créer le fichier .env.example

Créez .env.example à la racine (même emplacement que .env) :

VITE_API_URL=http://localhost:3535

Encart oral — .env vs .env.example

• .env contient les vraies valeurs de configuration. Il ne doit jamais être commité (il peut contenir des secrets : clés API, mots de passe).
• .env.example est un modèle commité dans le dépôt. Il montre aux autres développeurs quelles variables créer, sans révéler les vraies valeurs.

Quand un collègue clone le projet, il copie .env.example vers .env et remplit ses propres valeurs.

4. Vérifier le .gitignore

Ouvrez .gitignore et vérifiez que .env est bien ignoré. Vous devriez trouver ces lignes :

.env
.env.local
.env.*.local

Si ces lignes n'y sont pas, ajoutez-les.

5. Créer le plugin Axios

Créez le fichier src/plugins/axios.js :

import axios from 'axios'

// Lire l'URL de l'API depuis les variables d'environnement
// Si la variable n'existe pas, utiliser localhost comme fallback
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3535'

// Configurer l'URL de base pour toutes les requêtes
axios.defaults.baseURL = API_BASE_URL

// Configurer les headers par défaut
axios.defaults.headers.common['Accept-Language'] = 'fr'
axios.defaults.headers.common['Content-Type'] = 'application/json'

/**
 * Configure le token d'authentification dans les headers Axios.
 * Appelée par authStore lors du login/logout.
 * @param {string|null} token - Le token JWT ou null pour le supprimer
 */
export function setAuthToken (token) {
  if (token) {
    axios.defaults.headers.common.Authorization = `Bearer ${token}`
  } else {
    delete axios.defaults.headers.common.Authorization
  }
}

export default axios

Grâce à cette configuration :

• Toutes les requêtes partent automatiquement de http://localhost:3535
• On écrit /pokemons au lieu de http://localhost:3535/pokemons
• Les headers sont envoyés automatiquement

6. Vérifier dans la console

Redémarrez le serveur de développement (Ctrl+C puis npm run dev) pour que Vite relise le fichier .env.

Ouvrez la console du navigateur et vérifiez que l'application fonctionne toujours.

Redémarrage obligatoire

Les fichiers .env sont lus au démarrage du serveur Vite. Si vous modifiez .env, vous devez relancer npm run dev pour que les changements soient pris en compte.

Comparaison fetch vs Axios

	fetch()	Axios
Base URL	Non (URL complète à chaque appel)	Oui (baseURL configuré une fois)
Parsing JSON	Manuel (response.json())	Automatique (response.data)
Headers par défaut	Non	Oui (defaults.headers)
Intercepteurs	Non	Oui (requête et réponse)
Gestion d'erreur	Uniquement erreurs réseau	Erreurs réseau + codes HTTP 4xx/5xx

Tests

• npm install axios s'est bien exécuté (vérifier package.json)
• Le fichier .env existe à la racine avec VITE_API_URL=http://localhost:3535
• Le fichier .env.example existe à la racine
• .env est bien dans .gitignore
• src/plugins/axios.js exporte une instance Axios configurée
• L'application démarre sans erreur après redémarrage

Solution

src/plugins/axios.js

import axios from 'axios'

const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3535'

axios.defaults.baseURL = API_BASE_URL
axios.defaults.headers.common['Accept-Language'] = 'fr'
axios.defaults.headers.common['Content-Type'] = 'application/json'

export function setAuthToken (token) {
  if (token) {
    axios.defaults.headers.common.Authorization = `Bearer ${token}`
  } else {
    delete axios.defaults.headers.common.Authorization
  }
}

export default axios

.env

VITE_API_URL=http://localhost:3535

.env.example

VITE_API_URL=http://localhost:3535

Commit

git add -A
git commit -m "feat: configuration Axios et variables d'environnement"