Τι είναι Route Guards;

Question

Accepted Answer

**Route guards** είναι συναρτήσεις που ελέγχουν **εάν η πλοήγηση προς/από μια διαδρομή επιτρέπεται**. Εκτελούνται πριν ενεργοποιηθεί μια διαδρομή (ή πριν την εγκαταλείψετε), ενεργοποιώντας ελέγχους ταυτοπροσωπίας, έλεγχο δικαιωμάτων και προτροπές "ανοιχτές αλλαγές". ## Οι τύποι 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 ``` ## Ένα συναρτησιακό CanActivate guard (σύγχρονο Angular) ```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 επιστρέφει `true` (επιτρέψουν), `false` (αποκλείουν) ή ένα `UrlTree` (ανακατεύθυνση). Το σύγχρονο Angular χρησιμοποιεί **συναρτησιακά guards** (απλές συναρτήσεις με `inject()`) αντί των παλαιότερων κατηγοριών. ## Εφαρμογή guards στις διαδρομές ```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 — αποτρέψτε την τυχαία απώλεια δεδομένων ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Αυτό το κλασικό guard προειδοποιεί τους χρήστες πριν περιηγηθούν μακριά από ένα form με ανοιχτές αλλαγές. ## Τα guards μπορούν να είναι ασύγχρονα ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Γιατί είναι σημαντικό Τα guards είναι ο τυπικός, κεντρικοποιημένος τρόπος για να επιβάλετε τον έλεγχο πρόσβασης και τους κανόνες πλοήγησης στο Angular — προστασία αυθεντικοποιημένων διαδρομών, περιορισμός κατά ρόλο/δικαίωμα, αποτροπή απώλειας δεδομένων κατά την έξοδο και προ-φόρτωση δεδομένων (resolvers). Η τοποθέτηση αυτών των ελέγχων σε guards (αντί να είναι διάσπαρτα σε συστατικά) διατηρεί τη λογική ασφάλειας και πλοήγησης συνεπή και δηλωτική· το `authGuard` σε προστατευμένες διαδρομές είναι κάτι που εφαρμόζει σχεδόν κάθε πραγματική Angular εφαρμογή.