Angular Academy · Ders

Kimlik Doğrulama Üst Bilgileri Ekleme

Giden isteklere belirteçler ekleyin

Kimlik Doğrulama Üst Bilgileri Ekleme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Kimlik doğrulama için neden interceptor kullanılır

Çoğu API, her istekte bir Authorization üst bilgisi gerektirir. Bunu her çağrıya elle eklemek yerine bir interceptor, tüm giden isteklere otomatik olarak ekler.

Üst bilgi eklemek için kopyalama

İstekler değişmez olduğundan belirteci eklemek için setHeaders ile kopyalayın.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  });
  return next(authReq);
};

Belirteci bir servisten okuma

Geçerli belirteci almak için bir kimlik doğrulama/belirteç servisini inject edin. İçinde bir signal veya BehaviorSubject kullanmak, değerin güncel kalmasını sağlar.

export class AuthService {
  private token = signal<string | null>(null);
  getToken() { return this.token(); }
  setToken(t: string) { this.token.set(t); }
}

Belirteç yoksa atlama

Kullanıcı oturum açmadıysa özgün isteği değiştirmeden iletin.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (!token) return next(req);
  return next(req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  }));
};

Yalnızca API'nize ekleme

Belirtecinizi üçüncü taraf URL'lerine sızdırmayın. İstek URL'sinin arka ucunuza ait olup olmadığını denetleyerek koruma uygulayın.

const isApi = req.url.startsWith(environment.apiUrl);
if (!isApi || !token) return next(req);
return next(req.clone({
  setHeaders: { Authorization: 'Bearer ' + token }
}));

setHeaders ve headers.set karşılaştırması

clone içindeki setHeaders kısa ve öz yöntemdir. Ayrıca req.headers.set(...) kullanıp bunu { headers } aracılığıyla iletebilirsiniz. setHeaders birleştirir; tüm üst bilgilerin yerini almaz.

const headers = req.headers.set('Authorization', 'Bearer ' + token);
return next(req.clone({ headers }));

Birden çok üst bilgi ekleme

Tek bir kopyalama işleminde aynı anda birkaç üst bilgi ekleyin.

return next(req.clone({
  setHeaders: {
    Authorization: 'Bearer ' + token,
    'X-Client': 'web',
    'Accept-Language': lang
  }
}));

Çerezler için withCredentials

Kimlik doğrulama belirteçler yerine HttpOnly çerezleri kullanıyorsa tarayıcının bunları farklı origin'lere göndermesi için withCredentials ayarını yapın.

return next(req.clone({ withCredentials: true }));

Süresi dolmuş belirteci yenileme

Belirteç yenileme için interceptor bir 401 hatasını yakalayabilir, yeni bir belirteç isteyebilir ve ardından özgün isteği yeniden deneyebilir. Bu, hata işleme bölümünde ele alınan daha ileri bir örüntüdür.

Interceptor'ı saf tutma

Interceptor belirteci okumalı ve kopyalama yapmalıdır; burada gezinmeyi veya ağır mantığı tetiklemekten kaçının. İstek işlem hattının öngörülebilir kalması için sorumlulukları sınırlı tutun.

Kimlik doğrulama interceptor'ını kaydetme

Üst bilginin kayıt tutma veya diğer interceptor'lar çalışmadan önce eklenmesi için interceptor'ı zincirin erken bir bölümüne yerleştirin.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Hızlı Kontrol

Kimlik doğrulama üst bilgileri ekleme konusundaki anlayışınızı test edin.

Özet: Kimlik Doğrulama Üst Bilgileri Ekleme

Bir kimlik doğrulama interceptor'ı belirteci giden isteklere ekler.

setHeaders: { Authorization: ... } ile kopyalayın.
Belirteç yoksa atlayın; işlemi API URL'nizle sınırlayın.
Çerez tabanlı kimlik doğrulama için withCredentials kullanın.

Sırada: hataları genel olarak ele alma.

Sıkça Sorulan Sorular

“Kimlik Doğrulama Üst Bilgileri Ekleme” dersi ücretsiz mi?

Evet — “Kimlik Doğrulama Üst Bilgileri Ekleme” 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 Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Kimlik Doğrulama Üst Bilgileri Ekleme” dersinde ne öğreneceğim?

Giden isteklere belirteçler ekleyin Angular 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.

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

Önceden deneyim gerekmez. CoddyKit'te Angular 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 2. dersidir.

“Kimlik Doğrulama Üst Bilgileri Ekleme” 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 Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular 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

← Angular Academy Sayfasına Dön