Как реализовать правильно данный Guard?

Guard в Angular - это механизм, который позволяет контролировать доступ к определенным маршрутам или действиям в приложении. Использование Guards позволяет нам проверять различные условия перед тем, как разрешить или запретить пользователю доступ к определенным частям приложения.

Для реализации Guard в Angular необходимо выполнить несколько шагов:

1. Создание Guard: Сначала необходимо создать класс, который будет являться Guard. Для этого можно использовать Angular CLI команду ng generate guard guard-name, где guard-name - это имя вашего Guard.

ng generate guard guard-name

2. Реализация Guard: В созданном классе guard-name.guard.ts мы должны реализовать интерфейс CanActivate, который определяет метод canActivate(). Этот метод должен вернуть булево значение, указывающее, разрешено ли пользователю доступ к запрашиваемому маршруту или нет.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GuardNameGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // Здесь пишем логику для проверки условия
    // Если условие выполняется, возвращаем true, разрешая доступ
    // Если условие не выполняется, возвращаем false, запрещая доступ
  }
}

3. Регистрация Guard: Для того, чтобы Angular знал о нашем Guard и использовал его при проверке доступа, мы должны его зарегистрировать в нашем приложении. Для этого откройте файл app.module.ts и добавьте Guard в секцию providers.

import { GuardNameGuard } from './guard-name.guard';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
  ],
  providers: [
    GuardNameGuard // Регистрация Guard
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Использование Guard: Теперь, когда наш Guard зарегистрирован, мы можем использовать его для контроля доступа к маршрутам в нашем приложении. Для этого откройте файл app-routing.module.ts и добавьте Guard к маршрутам, которые требуют проверки доступа.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GuardNameGuard } from './guard-name.guard';

const routes: Routes = [
  {
    path: 'restricted-page',
    canActivate: [GuardNameGuard], // Использование Guard для контроля доступа
    loadChildren: () => import('./restricted-page/restricted-page.module').then(m => m.RestrictedPageModule)
  },
  // ...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Это все необходимые шаги для реализации Guard в Angular. Теперь, при каждом переходе на маршрут, на который применен Guard, будет вызываться метод canActivate(), и доступ будет разрешен или запрещен в зависимости от результата этого метода.