В предыдущем блоге мы обсуждали
Angular Router 10: Создание отдельного модуля для роутинга

Прежде чем перейти к Can Activate Guard, важно понять, что такое Guard в angular.
Проще говоря, Guards — это защитник маршрутизатора.

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

Guards будет работать только с логическим значением. Помимо этого, он может принимать обещание или Observable, даже ТАК он будет принимать логическое значение в качестве типа. Просто True означает навигацию, а False означает отсутствие навигации.

В Angular в основном есть 5 типов охранников,

  1. Может активировать: разрешить пользователю ИСПОЛЬЗОВАТЬ маршрут.
  2. Can Activate Child: чтобы узнать, может ли пользователь перейти к дочерним маршрутам.
  3. Можно деактивировать: для выхода из маршрута
  4. Resolve: получение данных перед активацией маршрута.
  5. CanLoad : маршрут к модулю, который загружен лениво

В нашем текущем блоге мы обсудим Can Activate guard.
Can Activate — это интерфейс, который реализует br Guard, решающий, можно ли активировать маршрут.

Я создал 2 компонента, один компонент входа в систему, а второй компонент выхода из системы.
1 служба и 1 защита, в файле службы мы будем хранить одну переменную, является ли она истинной или ложной,
и в нашем файле защиты мы будем проверять, имеет ли переменная значение true. Если это так, мы активируем наш маршрут.

Напоследок прикрепим щиток для роутера.

Найдите рабочий код здесь,
https://stackblitz.com/edit/angular-ivy-zydh9t

В logout.component.ts мы вызываем службу, которая устанавливает значение true.

auth.service.ts

Создайте файл ts с соглашением об именах _name_.guard.ts, чтобы создать защиту.

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

В маршруте входа мы прикрепили нашу защиту, добавив ключ canActivate.

В следующем блоге

Angular Router 12: можно отключить Guard

— — — — — — — — — Конец лекции — — — — — — —

Проверьте все уроки Angular Intermediate Lessons

https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b