Защитники маршрутов в Angular

В этом уроке объясняется, как защищать маршруты в приложениях Angular с помощью защитников маршрутов.

Что такое защитники маршрутов?

Защитники маршрутов управляют доступом к маршрутам в Angular. Они полезны для защиты важных маршрутов или маршрутов с ограниченным доступом.

Типы защитников

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

Создание защитника маршрута

Создайте защитника с помощью Angular CLI:

ng generate guard auth

Реализация canActivate()

Метод canActivate() управляет доступом к маршруту:

canActivate(): boolean {
  return true; // or false to block navigation
}

Использование защитников в маршрутах

Добавьте защитников к маршрутам в модуле маршрутизации:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

Защитник CanDeactivate

CanDeactivate не позволяет покинуть маршрут, если определённые условия не выполнены; это полезно для форм:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Защитник предварительной загрузки

Этот защитник получает данные до загрузки маршрута:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

Итоги

Вы научились защищать и улучшать навигацию в приложениях Angular с помощью защитников маршрутов. Продолжайте в том же духе!