Angular Academy · Pelajaran

Menambahkan Header Autentikasi

Lampirkan token pada permintaan keluar.

Menambahkan Header Autentikasi adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Mengapa menggunakan interceptor untuk autentikasi

Sebagian besar API memerlukan header Authorization pada setiap permintaan. Daripada menambahkannya secara manual pada setiap pemanggilan, interceptor menyisipkannya secara otomatis ke semua permintaan keluar.

Mengkloning untuk menambahkan header

Karena permintaan tidak dapat diubah, lakukan kloning dengan setHeaders untuk menyertakan token.

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

Membaca token dari layanan

Injeksi layanan autentikasi/token untuk mendapatkan token saat ini. Menggunakan signal atau BehaviorSubject di dalamnya membuat nilainya tetap terbaru.

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

Lewati jika tidak ada token

Jika pengguna belum masuk, teruskan permintaan asli tanpa perubahan.

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

Hanya pasang pada API Anda

Jangan bocorkan token Anda ke URL pihak ketiga. Lindungi dengan memeriksa apakah URL permintaan milik backend Anda.

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

setHeaders vs headers.set

setHeaders dalam clone adalah cara yang ringkas. Anda juga dapat menggunakan req.headers.set(...) dan meneruskannya melalui { headers }. setHeaders menggabungkan header; bukan mengganti semua header.

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

Menambahkan beberapa header

Sertakan beberapa header sekaligus dalam satu kloning.

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

withCredentials untuk kuki

Jika autentikasi menggunakan kuki HttpOnly, bukan token, atur withCredentials agar browser mengirimkannya lintas origin.

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

Menyegarkan token yang kedaluwarsa

Untuk menyegarkan token, interceptor dapat menangkap 401, meminta token baru, lalu mencoba kembali permintaan asli—pola lanjutan yang dibahas bersama penanganan error.

Menjaga interceptor tetap murni

Interceptor seharusnya membaca token dan melakukan kloning—hindari memicu navigasi atau logika berat di sini. Jaga tanggung jawabnya tetap terfokus agar pipeline permintaan tetap dapat diprediksi.

Mendaftarkan interceptor autentikasi

Tempatkan interceptor ini di awal rantai agar header sudah tersedia sebelum pencatatan atau interceptor lain dijalankan.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Pemeriksaan Singkat

Uji pemahaman Anda tentang penambahan header autentikasi.

Ringkasan: Menambahkan Header Autentikasi

Interceptor autentikasi menyertakan token pada permintaan keluar.

Kloning dengan setHeaders: { Authorization: ... }.
Lewati jika tidak ada token; batasi pada URL API Anda.
Gunakan withCredentials untuk autentikasi berbasis kuki.

Berikutnya: menangani error secara global.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menambahkan Header Autentikasi” gratis?

Ya — teks lengkap “Menambahkan Header Autentikasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menambahkan Header Autentikasi”?

Lampirkan token pada permintaan keluar. Kamu berlatih Angular 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 Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular 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 2 dari 4.

Berapa lama pelajaran “Menambahkan Header Autentikasi” 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 Angular Academy ini?

Ya. Setiap pelajaran Angular 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

← Kembali ke Angular Academy