Vue Academy · Lekcja

Uwierzytelnione wywołania API z interceptorami Axios

Interceptor żądań dla nagłówka Authorization oraz interceptor odpowiedzi dla przepływu 401 → refresh → retry.

Lekcja 3 z 413 kroki

Uwierzytelnione wywołania API z interceptorami Axios to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Wzorzec interceptorów

Zamiast dołączać nagłówki uwierzytelniania i obsługiwać 401 przy każdym wywołaniu, interceptory Axios centralizują tę logikę. Interceptor żądań dodaje token, a interceptor odpowiedzi automatycznie obsługuje wygaśnięcie i odświeżanie.

Tworzenie instancji Axios

Należy utworzyć dedykowaną instancję z bazowym URL API oraz withCredentials, aby ciasteczko z tokenem odświeżania httpOnly było wysyłane do endpointu odświeżania.

import axios from 'axios'

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

export default api

Przechowywanie tokenu dostępu w pamięci

Token dostępu należy przechowywać w zmiennej modułu lub w store Pinia, zamiast w localStorage. Para prostych funkcji dostępu pozwala interceptorom odczytywać i aktualizować token.

let accessToken = null

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

Interceptor żądań: dodawanie nagłówka

Interceptor żądań jest uruchamiany przed każdym żądaniem i dołącza Authorization: Bearer <token>, gdy token istnieje.

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

Interceptor odpowiedzi: obsługa 401

Interceptor odpowiedzi przekazuje pomyślne odpowiedzi bez zmian, ale w przypadku 401 uruchamia proces odświeżania.

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

Zapobieganie nieskończonym pętlom ponowień

Nieudane żądanie należy oznaczyć flagą, taką jak _retried, aby było ponawiane tylko raz. Jeśli samo odświeżanie zwróci 401, żądanie zostanie odrzucone zamiast zapętlić się bez końca.

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

Wywoływanie endpointu odświeżania

W przypadku 401 należy wysłać żądanie POST do /auth/refresh. Przeglądarka automatycznie wyśle ciasteczko httpOnly z tokenem odświeżania, a serwer odpowie nowym tokenem dostępu.

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

Ponawianie pierwotnego żądania

Po odświeżeniu należy zaktualizować nagłówek w pierwotnej konfiguracji i ponownie wykonać żądanie. Użytkownik nie zauważy przerwy.

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

Obsługa równoczesnych odpowiedzi 401

Jeśli wiele żądań zakończy się niepowodzeniem jednocześnie, nie należy wykonywać N równoległych wywołań odświeżania. Należy współdzielić pojedynczą obietnicę odświeżania będącą w toku; oczekujące żądania czekają na jej zakończenie, a następnie ponawiają próbę z nowym tokenem.

let refreshing = null

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

Rezygnacja: wymuszenie wylogowania

Jeśli odświeżanie się nie powiedzie, na przykład z powodu wygasłego lub nieważnego tokenu odświeżania, należy wyczyścić token przechowywany w pamięci i przekierować użytkownika do logowania. To jedno miejsce obsługuje wygaśnięcie sesji w całej aplikacji.

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

Używanie instancji w komponentach

Komponenty importują tylko skonfigurowaną instancję api i wykonują wywołania. Nagłówki uwierzytelniania, odświeżanie i ponawianie są dla kodu komponentów całkowicie niewidoczne.

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

Szybki test

Proszę sprawdzić swoją wiedzę na temat interceptorów Axios.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Poznali Państwo sposób wykonywania uwierzytelnionych wywołań za pomocą interceptorów:

Interceptor żądań dodaje Authorization: Bearer na podstawie tokenu przechowywanego w pamięci
Interceptor odpowiedzi przechwytuje 401 i odświeża token
Flaga _retried ponawia pierwotne żądanie dokładnie raz
POST /auth/refresh używa ciasteczka httpOnly do uzyskania nowego tokenu
Jedną obietnicę odświeżania należy współdzielić między równoczesnymi odpowiedziami 401, a w przypadku niepowodzenia wymusić wylogowanie

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Uwierzytelnione wywołania API z interceptorami Axios” jest bezpłatna?

Tak — pełny tekst „Uwierzytelnione wywołania API z interceptorami Axios” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Uwierzytelnione wywołania API z interceptorami Axios”?

Interceptor żądań dla nagłówka Authorization oraz interceptor odpowiedzi dla przepływu 401 → refresh → retry. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Uwierzytelnione wywołania API z interceptorami Axios”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Backend Fastify dla aplikacji SPA Vue
Uwierzytelnianie JWT: logowanie i odświeżanie
Uwierzytelnione wywołania API z interceptorami Axios
Wdrażanie pełnego stosu Vue na produkcję

← Powrót do Vue Academy