Vue Academy · Ders

Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları

Authorization başlığı için istek arakatmanı, 401 yanıt arakatmanı → yenileme → yeniden deneme.

Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Araya Girici Deseni

Her çağrıda kimlik doğrulama üst bilgilerini eklemek ve 401 durumlarını ele almak yerine Axios araya giricileri bu mantığı merkezileştirir. İstek araya giricisi belirteci ekler; yanıt araya giricisi sona ermeyi ve yenilemeyi şeffaf biçimde ele alır.

Axios Örneğini Oluşturma

API temel adresine sahip özel bir örnek oluşturun ve httpOnly yenileme çerezinin yenileme uç noktasına gönderilmesi için withCredentials kullanın.

import axios from 'axios'

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

export default api

Erişim Belirtecini Bellekte Saklama

Erişim belirtecini localStorage yerine bir modül değişkeninde (veya Pinia deposunda) tutun. Küçük bir erişimci çifti, araya giricilerin belirteci okumasını ve güncellemesini sağlar.

let accessToken = null

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

İstek Araya Giricisi: Üst Bilgiyi Ekleme

İstek araya giricisi her isteğin öncesinde çalışır ve bir belirteç varsa Authorization: Bearer <token> üst bilgisini ekler.

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

Yanıt Araya Giricisi: 401'i Yakalama

Yanıt araya giricisi başarılı yanıtları değiştirmeden iletir; ancak bir 401 durumunda yenileme akışını başlatır.

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

Sonsuz Yeniden Deneme Döngülerini Önleme

Başarısız isteği _retried gibi bir işaretle işaretleyin; böylece istek yalnızca bir kez yeniden denenir. Yenileme işleminin kendisi 401 döndürürse istek, sonsuza kadar döngüye girmek yerine reddedilir.

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

Yenileme Uç Noktasını Çağırma

401 durumunda /auth/refresh adresine POST gönderin. Tarayıcı httpOnly yenileme çerezini otomatik olarak gönderir; sunucu yeni bir erişim belirteci döndürür.

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

Özgün İsteği Yeniden Deneme

Yenileme işleminden sonra original yapılandırmadaki üst bilgiyi güncelleyin ve isteği yeniden gönderin. Kullanıcı kesintiyi hiç fark etmez.

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

Eşzamanlı 401'leri Ele Alma

Birçok istek aynı anda başarısız olursa N adet paralel yenileme çağrısı yapmak istemezsiniz. Devam eden tek bir yenileme vaadini paylaşın; kuyruğa alınmış istekler bu vaadi beklesin, ardından yeni belirteçle yeniden denensin.

let refreshing = null

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

Vazgeçme: Oturumu Kapatmaya Zorlama

Yenileme başarısız olursa (süresi dolmuş veya geçersiz yenileme belirteci), bellekteki belirteci temizleyin ve kullanıcıyı oturum açma sayfasına yönlendirin. Bu, tüm app için oturum süresinin dolmasını ele alan tek yerdir.

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

Bileşenlerde Örneği Kullanma

Bileşenler yalnızca yapılandırılmış api örneğini içe aktarır ve çağrılar yapar. Kimlik doğrulama üst bilgileri, yenileme ve yeniden deneme bileşen koduna tamamen şeffaftır.

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

Hızlı Kontrol

Axios araya giricileriyle ilgili anlayışınızı sınayın.

Özet

Araya giricilerle kimlik doğrulamalı çağrılar yapmayı öğrendiniz:

İstek araya giricisi, bellekteki belirteçten Authorization: Bearer üst bilgisini ekler
Yanıt araya giricisi 401 durumunu yakalar ve yenileme yapar
_retried işareti özgün isteği tam olarak bir kez yeniden dener
POST /auth/refresh yeni bir belirteç almak için httpOnly çerezini kullanır
Eşzamanlı 401 durumları için tek bir yenileme vaadini paylaşın; başarısızlıkta oturumu kapatmaya zorlayın

Sıkça Sorulan Sorular

“Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları” dersi ücretsiz mi?

Evet — “Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları” dersinde ne öğreneceğim?

Authorization başlığı için istek arakatmanı, 401 yanıt arakatmanı → yenileme → yeniden deneme. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vue SPA'leri için Fastify Arka Ucu
JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme
Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları
Tam Yığın Vue'yu Üretime Dağıtma

← Vue Academy Sayfasına Dön