Cilat janë ruajtësit e rrugës?

Question

Accepted Answer

**Ruajtësit e rrugës** janë funksione që kontrollojnë **nëse navigimi në/nga një rrugë lejohet**. Ata ekzekutohen para aktivizimit të një rruge (ose para se të largoheni nga ajo), duke mundësuar kontrolle autentifikimi, kontroll të lejeve dhe kërkesa për "ndryshime të pa ruajura". ## Llojet e ruajtësve ```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 ``` ## Një ruajtës funksional CanActivate (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 }; ``` Një ruajtës kthen `true` (lejo), `false` (blloko) ose `UrlTree` (ridirektoj). Angular modern përdor **ruajtëset funksionalë** (funksione të thjeshtë me `inject()`) në vend të atyre më të vjetërve të bazuar në klasa. ## Aplikimi i ruajtësve në rrugë ```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 — parandalim i humbjes aksidentale të të dhënave ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Esti ruajtës klasik paralajmëron përdoruesit para se të navigojnë larg nga një formë me redaktime të pa ruajura. ## Ruajtësit mund të jenë asinkronë ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Pse ka rëndësi Ruajtësit janë mënyra standarde, e centralizuar për të zbatuar kontrollin e qasjes dhe rregullat e navigimit në Angular — duke mbrojtur rrugët e autentifikuara, duke kufiztuar bazuar në rol/leje, duke parandaluar humbjen e të dhënave në dalje dhe duke ngarë paraprakisht të dhënat (resolvers). Vënia e këtyre kontrolleve në ruajtëset (në vend që të jenë të shpërndarë në komponentë) mban logjikën e sigurisë dhe navigimit konsistente dhe deklarative; `authGuard` në rrugë të mbrojtura është diçka që praktikisht çdo aplikacion Angular i vërtetë implementon.