Angular Academy · Pelajaran

Menambah Pengepala Pengesahan

Lampirkan token pada permintaan keluar.

Pelajaran 2 daripada 413 langkah

Menambah Pengepala Pengesahan ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Mengapa menggunakan pencegat untuk pengesahan

Kebanyakan API memerlukan pengepala Authorization pada setiap permintaan. Daripada menambahkannya secara manual pada setiap panggilan, pencegat menyuntikkannya secara automatik untuk semua permintaan keluar.

Mengklonkan untuk menambah pengepala

Oleh sebab permintaan tidak boleh diubah, klonkan dengan setHeaders untuk melampirkan 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 daripada perkhidmatan

Suntik perkhidmatan auth/token untuk mendapatkan token semasa. Menggunakan signal atau BehaviorSubject di dalamnya memastikan nilainya sentiasa terkini.

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

Langkau apabila tiada token

Jika pengguna belum dilog masuk, teruskan permintaan asal 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 }
  }));
};

Lampirkan hanya pada API anda

Jangan dedahkan token anda kepada URL pihak ketiga. Lindunginya dengan menyemak bahawa URL permintaan adalah milik bahagian belakang anda.

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

setHeaders berbanding headers.set

setHeaders dalam clone ialah cara yang ringkas. Anda juga boleh menggunakan req.headers.set(...) dan menghantarnya melalui { headers }. setHeaders menggabungkan pengepala; ia tidak menggantikan semua pengepala.

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

Menambah beberapa pengepala

Gantungkan beberapa pengepala serentak dalam satu klon.

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

withCredentials untuk kuki

Jika pengesahan menggunakan kuki HttpOnly dan bukannya token, tetapkan withCredentials supaya pelayar menghantarnya merentas asal.

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

Menyegarkan token yang telah tamat tempoh

Untuk penyegaran token, pencegat boleh menangkap 401, meminta token baharu, kemudian mencuba semula permintaan asal — corak yang lebih lanjut dan akan dibincangkan bersama pengendalian ralat.

Mengekalkan kepurean pencegat

Pencegat sepatutnya membaca token dan mengklonkan permintaan — elakkan daripada mencetuskan navigasi atau logik berat di sini. Kekalkan tanggungjawab yang berfokus supaya saluran paip permintaan kekal boleh diramal.

Mendaftarkan pencegat pengesahan

Letakkannya awal dalam rantaian supaya pengepala tersedia sebelum pengelogan atau pencegat lain dijalankan.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Semakan Pantas

Uji pemahaman anda tentang penambahan pengepala pengesahan.

Jawab dalam pelajaran interaktif

Imbas Kembali: Menambah Pengepala Pengesahan

Pencegat pengesahan melampirkan token pada permintaan keluar.

Klonkan dengan setHeaders: { Authorization: ... }.
Langkau apabila tiada token; hadkan kepada URL API anda.
Gunakan withCredentials untuk pengesahan berasaskan kuki.

Seterusnya: mengendalikan ralat secara global.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menambah Pengepala Pengesahan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Menambah Pengepala Pengesahan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menambah Pengepala Pengesahan”?

Lampirkan token pada permintaan keluar. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Menambah Pengepala Pengesahan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy