Vue Academy · Oppitunti

Autentikoidut API-kutsut Axios-interceptoreilla

Request-interceptor Authorization-otsakkeelle ja response-interceptor 401 → refresh → retry -kululle

Oppitunti 3/413 vaihetta

Autentikoidut API-kutsut Axios-interceptoreilla on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Interceptor-malli

Sen sijaan että todennusotsakkeet ja 401-virheiden käsittely toteutettaisiin jokaisessa kutsussa erikseen, Axiosin interceptorit keskittävät tämän logiikan. Pyyntöinterceptor lisää tokenin, ja vastausinterceptor käsittelee vanhenemisen sekä päivityksen läpinäkyvästi.

Axios-instanssin luominen

Luo erillinen instanssi, jossa on API:n perusosoite ja withCredentials, jotta httpOnly-refresh-eväste lähetetään refresh-reitille.

import axios from 'axios'

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

export default api

Access tokenin säilyttäminen muistissa

Säilytä access token moduulimuuttujassa (tai Pinia-kaupassa) localStoragen sijaan. Pienen luku- ja päivitysfunktioparin avulla interceptorit voivat lukea ja päivittää sen.

let accessToken = null

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

Pyyntöinterceptor: otsakkeen lisääminen

Pyyntöinterceptor suoritetaan ennen jokaista pyyntöä, ja se liittää mukaan Authorization: Bearer <token>-otsakkeen, kun token on olemassa.

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

Vastausinterceptor: 401-virheen sieppaaminen

Vastausinterceptor välittää onnistuneet vastaukset muuttumattomina, mutta käynnistää tokenin päivitysprosessin, kun vastaanotetaan 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)
  }
)

Loputtomien uudelleenyritysloopien estäminen

Merkitse epäonnistunut pyyntö lipulla, kuten _retried, jotta se yritetään uudelleen vain kerran. Jos päivityspyyntö itse palauttaa 401-virheen, pyyntö hylätään eikä suoritus jää ikuiseen silmukkaan.

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

Refresh-reitille kutsuminen

Kun vastaanotetaan 401, tee POST-kutsu osoitteeseen /auth/refresh. Selain lähettää httpOnly-refresh-evästeen automaattisesti, ja palvelin vastaa uudella access tokenilla.

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

Alkuperäisen pyynnön yrittäminen uudelleen

Päivitä alkuperäisen config-olion otsake ja suorita pyyntö uudelleen tokenin päivittämisen jälkeen. Käyttäjä ei huomaa keskeytystä.

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

Samanaikaisten 401-virheiden käsittely

Jos useat pyynnöt epäonnistuvat yhtä aikaa, N rinnakkaista päivityskutsua ei tarvita. Jaa yksi käynnissä oleva päivityslupaus; jonossa olevat pyynnöt odottavat sitä ja yrittävät sitten uudelleen uudella tokenilla.

let refreshing = null

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

Luovuttaminen: pakotettu uloskirjautuminen

Jos päivitys epäonnistuu (refresh token on vanhentunut tai virheellinen), tyhjennä muistissa oleva token ja ohjaa käyttäjä kirjautumiseen. Tämä on koko sovelluksen ainoa keskitetty paikka istunnon vanhenemisen käsittelyyn.

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

Instanssin käyttäminen komponenteissa

Komponentit vain tuovat määritetyn api-instanssin ja tekevät kutsut. Todennusotsakkeet, tokenin päivitys ja uudelleenyritykset ovat komponenttikoodille täysin läpinäkyviä.

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

Pikatesti

Testaa, miten hyvin ymmärrät Axios-interceptorit.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit todennetut kutsut interceptoreilla:

Pyyntöinterceptor lisää muistissa olevasta tokenista muodostetun Authorization: Bearer -otsakkeen
Vastausinterceptor sieppaa 401-virheen ja päivittää tokenin
_retried-lippu yrittää alkuperäisen pyynnön uudelleen täsmälleen kerran
POST /auth/refresh käyttää httpOnly-evästettä uuden tokenin hakemiseen
Jaa yksi päivityslupaus samanaikaisille 401-virheille ja pakota uloskirjautuminen epäonnistuessa

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Autentikoidut API-kutsut Axios-interceptoreilla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Autentikoidut API-kutsut Axios-interceptoreilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Autentikoidut API-kutsut Axios-interceptoreilla”?

Request-interceptor Authorization-otsakkeelle ja response-interceptor 401 → refresh → retry -kululle Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Autentikoidut API-kutsut Axios-interceptoreilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Fastify-taustapalvelin Vue SPA -sovelluksille
JWT-autentikointi: kirjautuminen ja päivitys
Autentikoidut API-kutsut Axios-interceptoreilla
Full-stack Vue -sovelluksen käyttöönotto tuotannossa

← Takaisin: Vue Academy