Vue Academy · Pelajaran

Panggilan API Terautentikasi dengan Interceptor Axios

Interceptor permintaan untuk header Authorization, interceptor respons untuk 401 → refresh → percobaan ulang.

Panggilan API Terautentikasi dengan Interceptor Axios adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Pola Interseptor

Daripada menambahkan tajuk autentikasi dan menangani respons 401 pada setiap panggilan, interseptor Axios memusatkan logika ini. Interseptor permintaan menambahkan token, sedangkan interseptor respons menangani kedaluwarsa dan penyegaran secara transparan.

Membuat Instans Axios

Buat instans khusus dengan URL dasar API dan withCredentials agar kuki penyegaran httpOnly dikirim ke titik akhir penyegaran.

import axios from 'axios'

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

export default api

Menyimpan Token Akses di Memori

Simpan token akses dalam variabel modul atau penyimpanan Pinia, bukan di localStorage. Sepasang pengakses sederhana memungkinkan interseptor membaca dan memperbarui token tersebut.

let accessToken = null

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

Interseptor Permintaan: Menambahkan Tajuk

Interseptor permintaan berjalan sebelum setiap permintaan dan menambahkan Authorization: Bearer <token> jika token tersedia.

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

Interseptor Respons: Menangkap 401

Interseptor respons meneruskan respons yang berhasil tanpa perubahan, tetapi saat menerima 401, interseptor tersebut memicu alur penyegaran.

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

Mencegah Perulangan Percobaan Ulang Tanpa Akhir

Tandai permintaan yang gagal dengan penanda seperti _retried agar hanya dicoba ulang sekali. Jika penyegaran itu sendiri mengembalikan 401, permintaan ditolak alih-alih berulang tanpa akhir.

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

Memanggil Titik Akhir Penyegaran

Saat menerima 401, kirim POST ke /auth/refresh. Browser mengirim kuki penyegaran httpOnly secara otomatis, lalu server membalas dengan token akses baru.

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

Mencoba Ulang Permintaan original

Setelah penyegaran, perbarui tajuk pada konfigurasi original dan jalankan kembali permintaan tersebut. Pengguna tidak akan melihat gangguan apa pun.

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

Menangani 401 Bersamaan

Jika banyak permintaan gagal sekaligus, Anda tidak ingin ada N panggilan penyegaran paralel. Bagikan satu promise penyegaran yang sedang berlangsung; permintaan yang mengantre menunggunya, lalu mencoba ulang dengan token baru.

let refreshing = null

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

Menyerah: Memaksa Keluar

Jika penyegaran gagal karena token penyegaran kedaluwarsa atau tidak valid, hapus token dari memori dan arahkan ulang ke halaman masuk. Inilah satu-satunya tempat yang menangani kedaluwarsa sesi untuk seluruh aplikasi.

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

Menggunakan Instans pada Komponen

Komponen cukup mengimpor instans api yang telah dikonfigurasi dan melakukan panggilan. Tajuk autentikasi, penyegaran, dan percobaan ulang sepenuhnya transparan bagi kode komponen.

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

Pemeriksaan Singkat

Uji pemahaman Anda tentang interseptor Axios.

Rangkuman

Anda telah mempelajari panggilan terautentikasi dengan interseptor:

Interseptor permintaan menambahkan Authorization: Bearer dari token yang tersimpan di memori
Interseptor respons menangkap 401 dan melakukan penyegaran
Penanda _retried mencoba ulang permintaan original tepat satu kali
POST /auth/refresh menggunakan kuki httpOnly untuk mendapatkan token baru
Bagikan satu promise penyegaran untuk 401 yang terjadi bersamaan; paksa keluar jika gagal

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Panggilan API Terautentikasi dengan Interceptor Axios” gratis?

Ya — teks lengkap “Panggilan API Terautentikasi dengan Interceptor Axios” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Panggilan API Terautentikasi dengan Interceptor Axios”?

Interceptor permintaan untuk header Authorization, interceptor respons untuk 401 → refresh → percobaan ulang. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Panggilan API Terautentikasi dengan Interceptor Axios” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Backend Fastify untuk SPA Vue
Autentikasi JWT: Login dan Refresh
Panggilan API Terautentikasi dengan Interceptor Axios
Men-deploy Vue Full-Stack ke Produksi

← Kembali ke Vue Academy