Vue Academy · Les

Veilige authenticatiepatronen

Tokens opslaan (in memory versus localStorage versus httpOnly-cookie), silent refresh en uitloggen bij het sluiten van een tabblad.

Les 4 van 413 stappen

Veilige authenticatiepatronen is een gratis Vue Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.

Tokens en waar je ze opslaat

SPA's authenticeren met tokens, maar waar je ze opslaat bepaalt je blootstelling aan XSS en CSRF. Het moderne patroon splitst een kortlevend toegangstoken van een langlevend vernieuwingstoken, waarbij elk token op een andere manier wordt opgeslagen.

Het localStorage-probleem

Tokens opslaan in localStorage is handig maar gevaarlijk: elk door XSS geïnjecteerd script kan het token lezen en buitmaken. Sla aanmeldgegevens daar niet op.

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

Toegangstoken in het geheugen

Bewaar het toegangstoken in een JavaScript-variabele of een reactieve ref. Het verdwijnt bij het opnieuw laden, waardoor een succesvolle XSS een veel korter tijdvenster heeft en er niets op schijf blijft staan.

import { ref } from "vue";

export const accessToken = ref(null);

Vernieuwingstoken in een httpOnly-cookie

Het vernieuwingstoken staat in een cookie met HttpOnly, Secure en SameSite. JavaScript kan het token niet lezen, dus XSS kan het niet stelen, en de browser stuurt het alleen naar je authenticatie-eindpunt.

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

Het toegangstoken toevoegen

Een Axios-verzoekinterceptor voegt het toegangstoken uit het geheugen bij elke aanroep toe aan de Authorization-header.

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

Verlopen detecteren: de 401

Wanneer het toegangstoken verloopt, antwoordt de server met 401 Unauthorized. Een antwoordinterceptor onderschept dit om een vernieuwing te starten.

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

Het token vernieuwen

Roep bij een 401 het vernieuwingseindpunt aan. De browser stuurt de httpOnly-vernieuwingcookie automatisch mee (withCredentials) en de server retourneert een nieuw toegangstoken.

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

De oorspronkelijke aanvraag opnieuw uitvoeren

Na het vernieuwen voer je de oorspronkelijke mislukte aanvraag opnieuw uit met het nieuwe token, zodat de gebruiker er niets van merkt.

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

Vernieuwingsstormen voorkomen

Als veel aanvragen tegelijk 401 opleveren, zet je ze achter één vernieuwing die al bezig is in de wachtrij, zodat je het vernieuwings-eindpunt niet steeds opnieuw aanroept.

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

Uitloggen

Bij het uitloggen wis je het token uit het geheugen en roep je een eindpunt aan dat de vernieuwingscookie aan de serverkant wist.

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

Combineren met CSRF-bescherming

Omdat de vernieuwingscookie automatisch wordt meegestuurd, beveilig je dat eindpunt met SameSite en CSRF-tokens, net als andere routes die met cookies worden geauthenticeerd.

Korte controle

Waar sla je het toegangstoken en het vernieuwingstoken elk op?

Beantwoord dit in de interactieve les

Samenvatting

Sla het toegangstoken op in een ref in het geheugen (nooit in localStorage) en het vernieuwingstoken in een HttpOnly-cookie. Een aanvraaginterceptor voegt het bearer-token toe; een antwoordinterceptor onderschept 401, roept het vernieuwings-eindpunt aan, werkt het token bij en voert de oorspronkelijke aanvraag opnieuw uit. Daarbij voorkom je dubbele gelijktijdige vernieuwingen en combineer je dit met CSRF-bescherming.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 42
Lessen: 156

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Veilige authenticatiepatronen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Veilige authenticatiepatronen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.

Wat leer ik in “Veilige authenticatiepatronen”?

Tokens opslaan (in memory versus localStorage versus httpOnly-cookie), silent refresh en uitloggen bij het sluiten van een tabblad. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Vue Academy te beginnen?

Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Veilige authenticatiepatronen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Vue Academy?

Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Vue Academy