X'inhu route guard?

Question

X'inhu route guard?

Accepted Answer

**Route guards** huma funzjonijiet li jikkontrollaw **kemm-il darba n-navigazzjoni sa/minn rotta hija permessa**. Jistgħu jaħdmu qabel ma r-rotta tiġi attivata (jew qabel ma taħqal), u jippermettu l-kontrolli tal-autentikazzjoni, il-kontroll tal-permessi, u l-avvenimenti ta' "tibdiliet mhux salvati". ## It-tipi tal-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 ``` ## Guard CanActivate funzjonali (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 }; ``` Guard jirritorna `true` (permetti), `false` (blokka), jew `UrlTree` (erġa' indirizza). Angular modern juża **functional guards** (funzjonijiet sempliċi b'`inject()`) minflok dawk għal-qadim ibbażati fuq il-klassi. ## Applikazzjoni tal-guards għall-rotted ```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 — evita l-wirt tal-data b'sensiela ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Il-guard klassiku dan ta' dan l-avert lill-utenti qabel ma jnaviġaw 'il bogħod minn formola b'editjar mhux salvat. ## Guards jistgħu jkunu async ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Għaliex hu importanti Guards huma l-mod standard, ċentralizzat biex jiddikjaraw il-kontroll tal-aċċess u r-regoli ta' navigazzjoni f'Angular — il-protezzjoni tal-rotted awtentikati, il-gate skond ir-rwol/permess, il-prevenzjoni tat-telf tad-data fuq l-ħruġ, u t-tgħabija minn qabel tal-data (resolver). Il-post ta' dawn il-kontrolli fil-guards (minflok dispersi fil-komponenti) jibqgħu l-loġika tas-sigurtà u n-navigazzjoni kostanti u deklarattiva; l-`authGuard` fuq ir-rotted protetta hija xi ħaġa li kważi kull applikazzjoni Angular reali timplimenta.