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

1. Защитники маршрутов.
   Защитники маршрутов используются для защиты маршрутов путем реализации определенных интерфейсов. Они разрешают или запрещают доступ к маршруту в зависимости от определенных условий. Angular предоставляет три встроенных средства защиты маршрутов: CanActivate, CanActivateChildи CanDeactivate. Вот обзор каждого из них:

1.1 CanActivate:
Защитник CanActivateразрешает или блокирует доступ к маршруту на основе возвращаемого логического значения или наблюдаемой величины, которая преобразуется в логическое значение.

Пример:

import { CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // Check if the user is authenticated
    if (isLoggedIn()) {
      return true;
    } else {
      // Redirect to the login page
      redirectToLogin();
      return false;
    }
  }
}

1.2 CanActivateChild:
Защитник CanActivateChildаналогичен CanActivate, но он специально защищает дочерние маршруты.

Пример:

import { CanActivateChild, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivateChild {
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // Check if the user has necessary permissions
    if (hasPermissions(route.data.requiredPermissions)) {
      return true;
    } else {
      // Redirect to an unauthorized page
      redirectToUnauthorized();
      return false;
    }
  }
}

1.3 CanDeactivate:
Защитник CanDeactivateиспользуется для контроля того, может ли пользователь покинуть маршрут или нет. Он дает возможность запросить у пользователя подтверждение или выполнить другие действия, прежде чем уйти от текущего маршрута.

Пример:

import { CanDeactivate } from '@angular/router';
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class DirtyCheckGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

1. Резолверы.
   Резолверы используются для получения данных перед активацией маршрута. Они гарантируют доступность необходимых данных перед отрисовкой компонента.

Пример:

import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable()
export class DataResolver implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    return fetchData();
  }
}

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

Пример:

const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];

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