Vue Academy · leksjon

Autentiserte API-kall med Axios-interceptors

Request-interceptor for Authorization-headeren og response-interceptor for 401 → refresh → retry.

Leksjon 3 av 413 trinn

Autentiserte API-kall med Axios-interceptors er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Interceptor-mønsteret

I stedet for å legge til auth-headere og håndtere 401 i hvert enkelt kall sentraliserer Axios interceptors denne logikken. En request-interceptor legger til tokenet, mens en response-interceptor håndterer utløp og refresh transparent.

Opprette Axios-instansen

Opprett en dedikert instans med API-ens base-URL og withCredentials, slik at den httpOnly refresh-cookien sendes til refresh-endepunktet.

import axios from 'axios'

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

export default api

Lagre access token i minnet

Hold access token i en modulvariabel (eller en Pinia-store) i stedet for i localStorage. Et lite par med tilgangsfunksjoner lar interceptors lese og oppdatere det.

let accessToken = null

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

Request-interceptor: legge til headeren

Request-interceptoren kjører før hver forespørsel og legger til Authorization: Bearer <token> når det finnes et token.

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

Response-interceptor: fange opp 401

Response-interceptoren sender vellykkede responser videre uten endringer, men starter refresh-flyten ved en 401.

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

Hindre uendelige retry-løkker

Merk den mislykkede forespørselen med et flagg som _retried, slik at den bare prøves på nytt én gang. Hvis selve refresh-kallet returnerer 401, avvises forespørselen i stedet for å gå i en evig løkke.

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

Kalle refresh-endepunktet

Ved 401 sendes en POST til /auth/refresh. Nettleseren sender den httpOnly refresh-cookien automatisk, og serveren svarer med et nytt access token.

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

Prøve den opprinnelige forespørselen på nytt

Etter refresh oppdateres headeren i den opprinnelige konfigurasjonen, og forespørselen kjøres på nytt. Brukeren merker ikke avbruddet.

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

Håndtere samtidige 401-feil

Hvis mange forespørsler mislykkes samtidig, bør det ikke sendes N parallelle refresh-kall. Del ett enkelt refresh-promise som fortsatt kjører; forespørsler i kø venter på det og prøves deretter på nytt med det nye tokenet.

let refreshing = null

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

Gi opp: tvinge utlogging

Hvis refresh mislykkes (fordi refresh-tokenet er utløpt eller ugyldig), tømmes tokenet i minnet, og brukeren omdirigeres til innlogging. Dette er det ene stedet som håndterer utløpte sesjoner for hele appen.

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

Bruke instansen i komponenter

Komponenter importerer bare den konfigurerte api-instansen og utfører kall. Auth-headere, refresh og retry er helt transparente for komponentkoden.

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

Rask sjekk

Test forståelsen av Axios-interceptors.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært å utføre autentiserte kall med interceptors:

Request-interceptoren legger til Authorization: Bearer fra tokenet i minnet
Response-interceptoren fanger opp 401 og utfører refresh
Et _retried-flagg prøver den opprinnelige forespørselen på nytt nøyaktig én gang
POST /auth/refresh bruker httpOnly-cookien til å hente et nytt token
Del ett refresh-promise ved samtidige 401-feil, og tving utlogging ved feil

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Autentiserte API-kall med Axios-interceptors» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Autentiserte API-kall med Axios-interceptors», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Autentiserte API-kall med Axios-interceptors»?

Request-interceptor for Authorization-headeren og response-interceptor for 401 → refresh → retry. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Autentiserte API-kall med Axios-interceptors»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Fastify-backend for Vue-SPA-er
JWT-autentisering: Innlogging og fornyelse
Autentiserte API-kall med Axios-interceptors
Sett en fullstack-Vue-app i produksjon

← Tilbake til Vue Academy