Как использовать Route Guard с Angular Router

Введение

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

Примечание. Подобная защита маршрута на стороне клиента не предназначена для обеспечения безопасности. Они не помешают умному пользователю найти способ добраться до защищенных маршрутов. Такая безопасность должна быть реализована на сервере. Вместо этого они предназначены для улучшения взаимодействия с пользователем (UX) ваших приложений.

Доступны 4 типа защиты маршрутизации:

• CanActivate: определяет, можно ли активировать маршрут.
• CanActivateChild: определяет, могут ли быть активированы дочерние элементы маршрута.
• CanLoad: определяет возможность загрузки маршрута. Это становится полезным для функциональных модулей, которые загружаются отложенно. Они даже не загрузятся, если сторож вернет false.
• CanDeactivate: определяет, может ли пользователь покинуть маршрут. Обратите внимание, что эта защита не мешает пользователю закрыть вкладку браузера или перейти по другому адресу. Он предотвращает действия только из самого приложения.

Использование CanActivate Route Guard

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

Давайте рассмотрим пример с защитой маршрута CanActivate, где мы запрашиваем службу auth, аутентифицирован ли пользователь:

import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot 
} from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class CanActivateRouteGuard implements CanActivate {
  constructor(private auth: AuthService) {}

Обратите внимание, как мы реализуем интерфейс CanActivate, объявляя метод canActivate. Метод дополнительно имеет доступ к ActivatedRouteSnapshot и RouterStateSnapshot в тех случаях, когда вам потребуется информация о текущем маршруте.

В нашем примере canActivate возвращает логическое значение в зависимости от того, аутентифицирован пользователь или нет, но он также мог бы вернуть наблюдаемое значение или обещание, которые разрешаются в логическое значение.

Для того, чтобы использовать их, охранники маршрута должны быть предоставлены как сервисы.

Давайте добавим его в провайдеры нашего модуля приложения:

// ...
import { AppRoutingModule } from './app-routing.module';
import { CanActivateRouteGuard } from './can-activate-route.guard';

import { AuthService } from './auth.service';

И, наконец, вы захотите добавить защиту как часть конфигурации маршрутизации.

Вот пример с модулем маршрутизации:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard.component';
import { CanActivateRouteGuard } from './can-activate-route.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard',
    component: DashboardComponent,
    canActivate: [CanActivateRouteGuard]
  }
];

Теперь только пользователи, прошедшие проверку подлинности, могут активировать маршрут /dashboard.

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

Реализация CanLoad и CanActivateChild выполняется аналогичным образом.

Примечание. Интерфейс CanLoad не имеет столько доступа к текущему состоянию маршрутизатора или активированному маршруту.

На этом пример для защиты маршрута CanActivate заканчивается.

Использование CanDeactivate Route Guard

Защита CanDeactivate имеет небольшое отличие в своей реализации, поскольку нам нужно указать компонент, который нужно деактивировать. Это позволяет нам исследовать рассматриваемый компонент, чтобы увидеть, есть ли что-то вроде несохраненных изменений.

Давайте рассмотрим пример с защитой маршрута CanDeactivate:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

import { DashboardComponent } from './dashboard.component';

В приведенном выше примере мы предполагаем, что в классе компонентов панели мониторинга есть элемент с именем unsavedChanges, который становится истинным при наличии несохраненных изменений. Маршрут не будет деактивирован, если не будет несохраненных изменений или если пользователь не подтвердит.

На этом пример для защиты маршрута CanDeactivate заканчивается.

Заключение

В этом руководстве вы узнали о средствах защиты маршрутов в Angular, таких как CanActivate и CanDeactivate.

Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.