Kapitel 76 speichert den Token, aber SCHICKT ihn noch NICHT mit – ein Request-Interceptor fügt den Authorization-Header AUTOMATISCH zu JEDEM ausgehenden Request hinzu, GENAU wie in Kapitel 50 per Hand mit curl -H.

Den Interceptor registrieren

import axios from 'axios';

export const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  headers: {
    'Content-Type': 'application/ld+json',
  },
});

apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

JEDER Aufruf über apiClient (auch der BEREITS in Kapitel 75 geschriebene useProjects-Hook, OHNE ihn anfassen zu müssen) erhält AB JETZT AUTOMATISCH den Header, FALLS ein Token vorhanden ist.

401-Antworten global abfangen

apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
    }

    return Promise.reject(error);
  },
);

EIN Response-Interceptor fängt 401 (Kapitel 50: fehlendes/abgelaufenes Token) GLOBAL ab – JEDE Komponente profitiert AUTOMATISCH von einer Weiterleitung zur Login-Seite, OHNE dass JEDE einzelne useQuery-Instanz das SELBST behandeln müsste.

Das vollständige Verhalten testen

NACH dem Login (Kapitel 76) zeigt ProjectListPage (Kapitel 75) JETZT WIRKLICH Daten – der TOKEN wird AUTOMATISCH mitgeschickt, GENAU wie im curl-Beispiel aus Kapitel 50, aber OHNE dass DIESE Komponente selbst IRGENDETWAS über Authentifizierung wissen muss.