Apa itu route guards?

Question

Accepted Answer

**Route guards** adalah fungsi yang mengontrol **apakah navigasi ke/dari sebuah rute diizinkan**. Mereka berjalan sebelum sebuah rute diaktifkan (atau sebelum Anda meninggalkannya), memungkinkan pemeriksaan autentikasi, kontrol izin, dan peringatan "perubahan tidak tersimpan". ## Jenis-jenis guard ```text CanActivate → can the user enter this route? (auth/permission check) CanActivateChild → same, for child routes CanDeactivate → can the user LEAVE? ("you have unsaved changes") CanMatch → should this route even be matched? (feature flags, role-based) resolve → pre-fetch data BEFORE the route activates ``` ## Sebuah guard CanActivate fungsional (Angular modern) ```ts import { CanActivateFn, Router } from "@angular/router"; import { inject } from "@angular/core"; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; // allow navigation } return router.createUrlTree(["/login"]); // redirect to login }; ``` Sebuah guard mengembalikan `true` (izinkan), `false` (blokir), atau `UrlTree` (alihkan). Angular modern menggunakan **guard fungsional** (fungsi biasa dengan `inject()`) alih-alih yang berbasis kelas yang lebih lama. ## Menerapkan guard ke rute ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // protect this route }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // only match for admins }, ]; ``` ## CanDeactivate — mencegah kehilangan data yang tidak disengaja ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Guard klasik ini memperingatkan pengguna sebelum menavigasi keluar dari formulir dengan suntingan yang belum tersimpan. ## Guard dapat bersifat asinkron ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Mengapa ini penting Guard adalah cara standar dan terpusat untuk menerapkan kontrol akses dan aturan navigasi di Angular — melindungi rute yang diautentikasi, membatasi berdasarkan peran/izin, mencegah kehilangan data saat keluar, dan memuat data sebelumnya (resolvers). Meletakkan pemeriksaan ini dalam guard (daripada tersebar di komponen) membuat logika keamanan dan navigasi tetap konsisten dan deklaratif; `authGuard` pada rute yang dilindungi adalah sesuatu yang secara virtual setiap aplikasi Angular nyata menerapkan.