Что такое guard в Angular и для чего он используется?

Guard в Angular — это перехватчик навигации, который выполняется до того, как роутер активирует или покинет маршрут. Он позволяет централизованно описать правила доступа и логику, которая должна сработать при переходах между страницами, не размазывая проверки по компонентам.

Основные виды guard

• CanActivate — можно ли активировать маршрут (например, пользователь авторизован).
• CanActivateChild — то же для дочерних маршрутов.
• CanDeactivate — можно ли покинуть маршрут (например, есть несохранённые изменения).
• CanLoad — можно ли лениво загрузить модуль.
• Resolve — предзагрузка данных до активации маршрута.

Пример CanActivate

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.auth.isLoggedIn()) return true;
    this.router.navigate(['/login']);
    return false;
  }
}

// В роутере:
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }

Современный Angular поддерживает функциональные guard — обычные функции, возвращающие boolean, Promise или Observable. Это упрощает код и уменьшает количество классов.

Где применяется

• Защита приватных разделов приложения от неавторизованных пользователей.
• Предотвращение потери данных при уходе со страницы с формой.
• Загрузка данных до отображения компонента через Resolve.
• Ограничение ленивой загрузки модулей по ролям.

Guard стоит применять, когда логика проверки относится к навигации, а не к самому компоненту: так код остаётся чистым, переиспользуемым и легко тестируемым.