Angular Academy · Урок

Функциональные защитники маршрутов

Защищайте маршруты с помощью функциональных защитников

«Функциональные защитники маршрутов» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

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

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

CanActivateFn

CanActivateFn возвращает true, чтобы разрешить переход, false, чтобы его заблокировать, UrlTree, чтобы перенаправить пользователя, либо наблюдаемую последовательность или обещание с одним из этих значений.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

Подключение защитника к route

Подключите защитники с помощью canActivate (это массив, поэтому можно объединить несколько защитников).

export const routes = [
  { path: 'dashboard', component: DashboardComponent,
    canActivate: [authGuard] }
];

Перенаправление с помощью UrlTree

Возврат UrlTree (из router.createUrlTree или parseUrl) одновременно блокирует и перенаправляет в один шаг.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

Асинхронные защитники

Защитники могут возвращать наблюдаемый поток — маршрутизатор ожидает первое значение, а затем завершает поток.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

Доступ к информации о route в защитнике

Функция CanActivateFn получает ActivatedRouteSnapshot и RouterStateSnapshot, поэтому Вы можете прочитать параметры, данные и URL, переход на который был инициирован.

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

Защитники canMatch

CanMatchFn определяет, соответствует ли route определению маршрута вообще, — это удобно для переключения routes по флагу функции или отложенной загрузки только при наличии разрешения.

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

Защитники canDeactivate

CanDeactivateFn выполняется при выходе из route — это идеально подходит для подтверждения при наличии несохранённых изменений. Функция получает экземпляр компонента.

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

Объединение нескольких защитников

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

canActivate: [authGuard, roleGuard]
// both must pass

Почему функциональные защитники лучше защитников на основе классов

Функциональные защитники проще: не требуют шаблонного кода @Injectable, позволяют легко использовать inject(), поддерживают композицию и легко исключаются при оптимизации дерева. Интерфейсы CanActivate на основе классов устарели.

Защитники и дочерние routes

canActivateChild защищает все дочерние routes родительского маршрута в одном месте, поэтому не нужно повторять защитник для каждого дочернего маршрута.

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете функциональные защитники.

Повторение: функциональные защитники routes

Функциональные защитники управляют навигацией с помощью обычных функций.

CanActivateFn: разрешение, блокировка или перенаправление (UrlTree).
CanMatchFn: определяет, соответствует ли route вообще.
CanDeactivateFn: подтверждение выхода.
Используйте inject() для служб и объединяйте защитники в массивах.

Далее: события маршрутизатора и навигация.

Часто задаваемые вопросы

Урок «Функциональные защитники маршрутов» бесплатный?

Да — полный текст урока «Функциональные защитники маршрутов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Функциональные защитники маршрутов»?

Защищайте маршруты с помощью функциональных защитников Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Функциональные защитники маршрутов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Параметры маршрутов и параметры запросов
Резолверы и данные маршрута
Функциональные защитники маршрутов
События маршрутизатора и навигация

← Назад к Angular Academy