Vue Academy · Lektion

Sichere Authentifizierungsmuster

Token-Speicherung (Arbeitsspeicher vs. localStorage vs. httpOnly-Cookie), stilles Aktualisieren und Abmelden beim Schließen des Tabs

Sichere Authentifizierungsmuster ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Token und ihr Speicherort

SPAs authentifizieren sich mit Token. Wo Sie diese speichern, entscheidet jedoch über Ihre Anfälligkeit für XSS und CSRF. Das moderne Muster trennt ein kurzlebiges Access-Token von einem langlebigen Refresh-Token, die jeweils unterschiedlich gespeichert werden.

Das localStorage-Problem

Das Speichern von Token in localStorage ist praktisch, aber gefährlich: Jedes durch XSS eingeschleuste Skript kann sie auslesen und das Token übertragen. Vermeiden Sie es, Zugangsdaten dort abzulegen.

// AVOID
localStorage.setItem("token", accessToken);

Access-Token im Speicher

Bewahren Sie das Access-Token in einer JavaScript-Variablen oder einem reaktiven Ref auf. Bei einem erneuten Laden verschwindet es. Dadurch ist das Zeitfenster eines erfolgreichen XSS-Angriffs deutlich kleiner, und es bleibt nichts dauerhaft auf dem Datenträger gespeichert.

import { ref } from "vue";

export const accessToken = ref(null);

Refresh-Token in einem httpOnly-Cookie

Das Refresh-Token befindet sich in einem Cookie mit den Attributen HttpOnly, Secure und SameSite. JavaScript kann es nicht auslesen, sodass XSS es nicht stehlen kann. Der Browser sendet es außerdem nur an Ihren Auth-Endpunkt.

Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/auth

Access-Token anhängen

Ein Axios-Request-Interceptor fügt das im Speicher befindliche Access-Token bei jedem Aufruf zum Authorization-Header hinzu.

api.interceptors.request.use((config) => {
  if (accessToken.value) {
    config.headers.Authorization = "Bearer " + accessToken.value;
  }
  return config;
});

Ablauf erkennen: der 401-Status

Wenn das Access-Token abläuft, antwortet der Server mit 401 Unauthorized. Ein Response-Interceptor fängt dies ab, um eine Aktualisierung auszulösen.

api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401) {
      // attempt refresh
    }
    return Promise.reject(error);
  }
);

Token aktualisieren

Rufen Sie bei einem 401 den Refresh-Endpunkt auf. Der Browser sendet das httpOnly-Refresh-Cookie automatisch (withCredentials), und der Server gibt ein neues Access-Token zurück.

const { data } = await axios.post("/auth/refresh", null, {
  withCredentials: true
});
accessToken.value = data.accessToken;

Die ursprüngliche Anfrage wiederholen

Wiederholen Sie nach der Aktualisierung die ursprüngliche fehlgeschlagene Anfrage mit dem neuen Token, damit der Benutzer davon nichts bemerkt.

async (error) => {
  const original = error.config;
  if (error.response?.status === 401 && !original._retry) {
    original._retry = true;
    const { data } = await axios.post("/auth/refresh", null, { withCredentials: true });
    accessToken.value = data.accessToken;
    original.headers.Authorization = "Bearer " + data.accessToken;
    return api(original);
  }
  return Promise.reject(error);
}

Refresh-Stürme vermeiden

Wenn viele Anfragen gleichzeitig mit 401 beantwortet werden, stellen Sie sie hinter eine einzige laufende Aktualisierung, damit der Aktualisierungsendpunkt nicht wiederholt aufgerufen wird.

let refreshing = null;
function refresh() {
  if (!refreshing) {
    refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
      .finally(() => { refreshing = null; });
  }
  return refreshing;
}

Abmelden

Löschen Sie beim Abmelden das Token aus dem Arbeitsspeicher und rufen Sie einen Endpunkt auf, der das Refresh-Cookie serverseitig löscht.

async function logout() {
  accessToken.value = null;
  await axios.post("/auth/logout", null, { withCredentials: true });
}

Mit CSRF-Schutz kombinieren

Da das Refresh-Cookie automatisch gesendet wird, schützen Sie diesen Endpunkt mit SameSite und CSRF-Tokens – genau wie andere Cookie-authentifizierte Routen.

Kurztest

Wo sollten das Access-Token und das Refresh-Token jeweils gespeichert werden?

Zusammenfassung

Speichern Sie das Access-Token in einer Referenz im Arbeitsspeicher (niemals in localStorage) und das Refresh-Token in einem HttpOnly-Cookie. Ein Anfrage-Interceptor fügt das Bearer-Token hinzu; ein Antwort-Interceptor fängt 401 ab, ruft den Aktualisierungsendpunkt auf, aktualisiert das Token und wiederholt die ursprüngliche Anfrage – wobei gleichzeitige Aktualisierungen zusammengefasst und CSRF-Schutzmaßnahmen eingesetzt werden.

Häufig gestellte Fragen

Ist die Lektion „Sichere Authentifizierungsmuster“ kostenlos?

Ja — der vollständige Text von „Sichere Authentifizierungsmuster“ 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 „Sichere Authentifizierungsmuster“?

Token-Speicherung (Arbeitsspeicher vs. localStorage vs. httpOnly-Cookie), stilles Aktualisieren und Abmelden beim Schließen des Tabs 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 4 von 4.

Wie lange dauert die Lektion „Sichere Authentifizierungsmuster“?

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

← Zurück zu Vue Academy