Что такое route guards?

Question

Accepted Answer

**Route guards** — это функции, которые контролируют **разрешена ли навигация на маршрут/с маршрута**. Они выполняются перед активацией маршрута (или перед его покиданием), позволяя проводить проверки аутентификации, управлять разрешениями и показывать подсказки о "несохраненных изменениях". ## Почему это важно ```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 (современный 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()`) вместо старых class-based вариантов. ## Применение 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 предупреждает пользователей перед уходом с формы с несохраненными изменениями. ## 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 приложение.