Latihan 1: Interceptors HTTP — Angular

Latihan 1 dari materi Interceptors HTTP di Angular — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya export const authInterceptor = (req, next) => { ... } dengan const token = 'my-token' di dalamnya. Biarkan baris token itu, lalu:

Tambahkan import { HttpInterceptorFn } from '@angular/common/http' di atas file.
Beri tipe: export const authInterceptor: HttpInterceptorFn = (req, next) => {.
Buat salinan request-nya: const authReq = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }).
Teruskan salinannya: return next(authReq).

Editor ini gak merender apa pun (gak ada komponen). Penilai membaca kodenya, lalu memanggil authInterceptor dengan request tiruan dan next yang mengembalikan request yang diterimanya.

Yang dicek:

authInterceptor dideklarasikan dengan tipe : HttpInterceptorFn.
Header Authorization ada di dalam setHeaders salinannya.
next() menerima hasil clone: next(authReq) sesudah const authReq = req.clone(...), atau langsung next(req.clone(...)).
Yang dikembalikan interceptor adalah hasil next(...), dan request yang sampai di next membawa Authorization: Bearer my-token.

Hint

Interceptor fungsional diberi tipe HttpInterceptorFn dari @angular/common/http, dan request yang lewat gak bisa diubah di tempat, jadi yang dikirim selalu salinannya.
Di dalam fungsinya: buat salinan dengan req.clone dan opsi setHeaders yang berisi Authorization, simpan di authReq, lalu kembalikan hasil next dengan salinan itu.
export const authInterceptor: HttpInterceptorFn = (req, next) => { const token = 'my-token'; const authReq = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }); return next(authReq) }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Interceptors HTTP — Angular

Hint

Memperbarui Aplikasi