0Pricing
Vue Academy · Lektion

Authentifizierte API-Aufrufe mit Axios-Interceptors

Request-Interceptor für den Authorization-Header und Response-Interceptor für 401 → Aktualisieren → Wiederholen

Authentifizierte API-Aufrufe mit Axios-Interceptors ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Interceptor-Muster

Statt Auth-Header und die Behandlung von 401 in jedem einzelnen Aufruf zu implementieren, zentralisieren Axios-Interceptor diese Logik. Ein Request-Interceptor fügt das Token hinzu, ein Response-Interceptor behandelt Ablauf und Erneuerung transparent.

Erstellen der Axios-Instanz

Erstellen Sie eine eigene Instanz mit der API-Basis-URL und withCredentials, damit das httpOnly-Refresh-Cookie an den Refresh-Endpunkt gesendet wird.

import axios from 'axios'

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

export default api

Access-Token im Arbeitsspeicher speichern

Halten Sie das Access-Token in einer Modulvariablen (oder einem Pinia-Store) statt in localStorage. Ein kleines Paar von Zugriffsfunktionen ermöglicht es den Interceptors, das Token zu lesen und zu aktualisieren.

let accessToken = null

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

Request-Interceptor: Header hinzufügen

Der Request-Interceptor läuft vor jedem Request und fügt Authorization: Bearer <token> hinzu, wenn ein Token vorhanden ist.

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

Response-Interceptor: 401 abfangen

Der Response-Interceptor reicht erfolgreiche Responses unverändert durch, startet bei einem 401 jedoch den Refresh-Ablauf.

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

Endlosschleifen bei Wiederholungen verhindern

Markieren Sie den fehlgeschlagenen Request mit einem Flag wie _retried, damit er nur einmal wiederholt wird. Gibt der Refresh selbst 401 zurück, wird der Request abgelehnt, statt endlos weiterzulaufen.

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

Den Refresh-Endpunkt aufrufen

Senden Sie bei 401 einen POST an /auth/refresh. Der Browser sendet das httpOnly-Refresh-Cookie automatisch; der Server antwortet mit einem neuen Access-Token.

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

Den ursprünglichen Request wiederholen

Aktualisieren Sie nach der Erneuerung den Header in der ursprünglichen Konfiguration und führen Sie den Request erneut aus. Die Unterbrechung bleibt für den Benutzer unsichtbar.

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

Gleichzeitige 401-Fehler behandeln

Wenn viele Requests gleichzeitig fehlschlagen, möchten Sie nicht N parallele Refresh-Aufrufe auslösen. Teilen Sie ein einzelnes laufendes Refresh-Promise; wartende Requests warten darauf und werden anschließend mit dem neuen Token wiederholt.

let refreshing = null

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

Aufgeben: Logout erzwingen

Wenn der Refresh fehlschlägt (abgelaufenes oder ungültiges Refresh-Token), löschen Sie das Token aus dem Arbeitsspeicher und leiten Sie zum Login weiter. Dies ist die zentrale Stelle, an der der Ablauf einer Sitzung für die gesamte App behandelt wird.

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

Die Instanz in Komponenten verwenden

Komponenten importieren einfach die konfigurierte api-Instanz und führen Aufrufe aus. Auth-Header, Token-Erneuerung und Wiederholung sind für den Code der Komponenten vollständig transparent.

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

Kurzer Test

Testen Sie Ihr Verständnis der Axios-Interceptor.

Zusammenfassung

Sie haben authentifizierte Aufrufe mit Interceptors gelernt:

  • Der Request-Interceptor fügt Authorization: Bearer mit dem Token aus dem Arbeitsspeicher hinzu
  • Der Response-Interceptor fängt 401 ab und führt eine Token-Erneuerung durch
  • Ein _retried-Flag wiederholt den ursprünglichen Request genau einmal
  • POST /auth/refresh verwendet das httpOnly-Cookie, um ein neues Token zu erhalten
  • Teilen Sie bei gleichzeitigen 401-Fehlern ein Refresh-Promise und erzwingen Sie bei einem Fehler den Logout

Häufig gestellte Fragen

Ist die Lektion „Authentifizierte API-Aufrufe mit Axios-Interceptors“ kostenlos?

Ja — der vollständige Text von „Authentifizierte API-Aufrufe mit Axios-Interceptors“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Authentifizierte API-Aufrufe mit Axios-Interceptors“?

Request-Interceptor für den Authorization-Header und Response-Interceptor für 401 → Aktualisieren → Wiederholen Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Authentifizierte API-Aufrufe mit Axios-Interceptors“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Fastify-Backend für Vue-SPAs
  2. JWT-Authentifizierung: Login und Aktualisierung
  3. Authentifizierte API-Aufrufe mit Axios-Interceptors
  4. Full-Stack-Vue in der Produktion bereitstellen
← Zurück zu Vue Academy