Angular Resources Tidak Cocok Digunakan untuk Guards

Angular 22 memperkenalkan Resource API yang stabil. Alat ini membantu Anda melakukan query ke API dan melacak status loading atau error. Ini bekerja dengan baik untuk banyak tugas.

Namun, jangan gunakan di dalam Guards atau Resolvers.

Guards dan Resolvers memblokir navigasi. Sebuah Guard memeriksa apakah pengguna dapat mengakses sebuah rute. Sebuah Resolver mengambil data sebelum komponen dimuat. Keduanya membutuhkan boolean, Promise, atau Observable untuk menyelesaikan logikanya.

Resources adalah bagian dari Signals API. Signals bersifat reaktif. Mereka tidak mengembalikan nilai secara sinkron. Saat Anda membuat sebuah Resource, nilainya dimulai sebagai undefined. Kemudian nilainya berpindah ke status loading.

Perhatikan kesalahan ini:

export const authGuard: CanActivateFn = () => { const authResource = httpResource(() => ({ url: '/api/auth/status', }));

return authResource.value() ?? false; };

Metode .value() mengembalikan nilai signal saat ini secara langsung. Karena pemanggilan API membutuhkan waktu, nilainya menjadi undefined pada awalnya. Guard melihat undefined, menganggapnya sebagai false, dan membatalkan navigasi. Aplikasi tidak pernah menunggu API tersebut.

Untuk memperbaikinya, Anda harus mengubah Resource menjadi Observable. Hal ini menambah kompleksitas yang tidak perlu.

Guards perlu merepresentasikan satu kejadian asinkron tunggal. Untuk ini, gunakan HttpClient dengan Observables atau native fetch API dengan Promises.

Cara yang benar:

export const authGuard: CanActivateFn = () => { const http = inject(HttpClient);

return http.get('/api/auth/status'); };

Observable memberi tahu Router untuk menunggu hingga permintaan selesai.

Gunakan Resource API untuk komponen dan service. Ini sangat bagus untuk mengikat data async ke template Anda. Gunakan Promises dan Observables untuk logika Router Anda.

Source: https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j