Vue Academy · Les

Geauthenticeerde API-aanroepen met Axios-interceptors

Request-interceptor voor de Authorization-header en response-interceptor voor 401 → refresh → retry.

Les 3 van 413 stappen

Geauthenticeerde API-aanroepen met Axios-interceptors is een gratis Vue Academy-les op CoddyKit. Dit is les 3 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.

Het interceptorpatroon

In plaats van bij elke aanroep authenticatieheaders toe te voegen en 401-fouten af te handelen, centraliseren Axios-interceptors deze logica. Een aanvraaginterceptor voegt het token toe en een antwoordinterceptor handelt verlopen tokens en vernieuwing transparant af.

De Axios-instantie maken

Maak een afzonderlijke instantie met de basis-URL van de API en withCredentials, zodat de httpOnly-vernieuwingscookie naar het vernieuwingseindpunt wordt meegestuurd.

import axios from 'axios'

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

export default api

Het toegangstoken in het geheugen bewaren

Bewaar het toegangstoken in een modulevariabele of Pinia-store in plaats van localStorage. Met een klein paar toegangsfuncties kunnen interceptors het token lezen en bijwerken.

let accessToken = null

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

Aanvraaginterceptor: de header toevoegen

De aanvraaginterceptor wordt vóór elke aanvraag uitgevoerd en voegt Authorization: Bearer <token> toe wanneer er een token bestaat.

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

Antwoordinterceptor: 401 onderscheppen

De antwoordinterceptor laat geslaagde antwoorden ongewijzigd door, maar start bij een 401 de vernieuwingsprocedure.

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

Oneindige herhalingslussen voorkomen

Markeer de mislukte aanvraag met een markering zoals _retried, zodat die maar één keer opnieuw wordt uitgevoerd. Als het vernieuwen zelf 401 retourneert, wordt de aanvraag afgewezen in plaats van eindeloos te blijven herhalen.

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

Het vernieuwingseindpunt aanroepen

Stuur bij een 401 een POST naar /auth/refresh. De browser stuurt de httpOnly-vernieuwingscookie automatisch mee; de server antwoordt met een nieuw toegangstoken.

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

De oorspronkelijke aanvraag opnieuw uitvoeren

Werk na het vernieuwen de header in de oorspronkelijke configuratie bij en voer de aanvraag opnieuw uit. De gebruiker merkt de onderbreking niet.

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

Gelijktijdige 401-fouten afhandelen

Als veel aanvragen tegelijk mislukken, wil je niet N parallelle aanroepen van het vernieuwingseindpunt. Deel één actieve vernieuwingsbelofte; aanvragen in de wachtrij wachten daarop en worden daarna met het nieuwe token opnieuw uitgevoerd.

let refreshing = null

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

Opgeven: gedwongen uitloggen

Als het vernieuwen mislukt, bijvoorbeeld door een verlopen of ongeldig vernieuwingstoken, wis je het token uit het geheugen en stuur je de gebruiker naar de inlogpagina. Dit is de enige plek die het verlopen van de sessie voor de hele app afhandelt.

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

De instantie in componenten gebruiken

Componenten importeren alleen de geconfigureerde api-instantie en doen hun aanroepen. Authenticatieheaders, vernieuwen en opnieuw uitvoeren zijn volledig transparant voor de code van de componenten.

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

Korte controle

Test je begrip van Axios-interceptors.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt geleerd hoe je geauthenticeerde aanroepen met interceptors doet:

De aanvraaginterceptor voegt Authorization: Bearer uit het toegangstoken in het geheugen toe
De antwoordinterceptor onderschept 401 en vernieuwt het token
Een _retried-markering voert de oorspronkelijke aanvraag precies één keer opnieuw uit
POST /auth/refresh gebruikt de httpOnly-cookie om een nieuw token te krijgen
Deel één vernieuwingsbelofte voor gelijktijdige 401-fouten en dwing bij een fout uitloggen af

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 “Geauthenticeerde API-aanroepen met Axios-interceptors” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Geauthenticeerde API-aanroepen met Axios-interceptors”, 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 “Geauthenticeerde API-aanroepen met Axios-interceptors”?

Request-interceptor voor de Authorization-header en response-interceptor voor 401 → refresh → retry. 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 3 van 4.

Hoe lang duurt de les “Geauthenticeerde API-aanroepen met Axios-interceptors”?

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

Fastify-backend voor Vue-SPA's
JWT-authenticatie: inloggen en vernieuwen
Geauthenticeerde API-aanroepen met Axios-interceptors
Full-stack Vue naar productie deployen

← Terug naar Vue Academy