რა არის მარშრუტის მცველი?

Question

Accepted Answer

**მარშრუტის მცველი** ფუნქციები არის, რომლებიც აკონტროლებენ **სამუშაოშია თუ არა მარშრუტზე/მარშრუტიდან ნავიგაცია**. ისინი გაშვებულია მარშრუტის აქტივაციის წინ (ან მის დატოვებამდე), რაც შესაძლებელ ხდის ავთენტიფიკაციის შემოწმებას, ნებართვის კონტროლს და "შენახული ცვლილებების" მოთხოვნებს. ## მცველის ტიპები ```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 მცველი (თანამედროვე 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 }; ``` მცველი აბრუნებს `true` (დაშვება), `false` (დაბლოკვა), ან `UrlTree` (გადამისამართება). თანამედროვე Angular იყენებს **ფუნქციურ მცველებს** (სხვა ფუნქციები `inject()`-ით) დეკორატორზე დაფუძნებული ძველი მცველების ნაცვლად. ## მცველების გამოყენება მარშრუტებზე ```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; }; ``` ეს კლასიკური მცველი გაფრთხოვებს მომხმარებელს მარშრუტიდან შემდეგ ფორმადან დატოვებამდე, რომელიც შეცვლილი აქვს და დაუშენახავი. ## მცველი შეიძლება იყოს ასინქროული ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## რატომ არის მნიშვნელოვანი მცველი სტანდარტული, ცენტრალიზებული გზაა Angular-ში დაშვების კონტროლისა და ნავიგაციის წესების აღსრულების - დაცვის ავთენტიფიცირებული მარშრუტები, კარიბჭე როლი/ნებართვებით, შენახული მონაცემების დაკარგვის თავიდან ასაცილებლად გასვლაზე და მონაცემების წინასწარი ჩატვირთვა (resolver). ეს შემოწმებები მცველებში დაყენება (ნაცრობებში გაფანტული მაგივრად) ინახავს უსაფრთხოების და ნავიგაციის ლოგიკას თანმიმდევრული და დეკლარაციული; `authGuard` დაცული მარშრუტებზე არის იმ რაც თითქმის ყველა სერიოზული Angular აპლიკაცია აციკლებს.