Как при клике на закрытый роут через AuthGuad вывести нотификацию?

Когда пользователь пытается получить доступ к защищенному роуту, Angular использует Guard, чтобы проверить, авторизован ли пользователь. Если пользователь не авторизован, Guard перенаправляет пользователя на страницу входа или другую страницу, ограниченную доступом.

Теперь, чтобы вывести нотификацию при попытке доступа к закрытому роуту, вы можете использовать такие шаги:

1. Создайте сервис для уведомлений, где будет храниться информация о сообщении для отображения пользователю.

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

@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  private message: string;

  setMessage(message: string) {
    this.message = message;
  }

  getMessage() {
    return this.message;
  }
}

2. В настройках вашего AuthGuard добавьте зависимость от NotificationService.

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthenticationService } from './authentication.service';
import { NotificationService } from './notification.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthenticationService,
    private router: Router,
    private notificationService: NotificationService
  ) {}

  canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.notificationService.setMessage('Доступ запрещен. Пожалуйста, войдите в систему.');
      this.router.navigate(['/login']);
      return false;
    }
  }
}

3. В компоненте, отвечающем за вывод уведомления, включите сервис для уведомлений и добавьте обработку изменений сообщения.

import { Component } from '@angular/core';
import { NotificationService } from './notification.service';

@Component({
  selector: 'app-notification',
  template: `<div *ngIf="message">{{ message }}</div>`
})
export class NotificationComponent {
  message: string;

  constructor(private notificationService: NotificationService) {
    this.message = notificationService.getMessage();
    notificationService.messageChanged.subscribe(message => {
      this.message = message;
    });
  }
}

4. В шаблоне вашего компонента, содержащего роуты, добавьте компонент для вывода уведомлений.

<app-notification></app-notification>
<router-outlet></router-outlet>

5. В других компонентах, которым требуется отобразить уведомление, включите сервис для уведомлений и используйте метод setMessage() для установки сообщения.

import { Component } from '@angular/core';
import { NotificationService } from './notification.service';

@Component({
  selector: 'app-some-component',
  template: `<button (click)="showNotification()">Показать уведомление</button>`
})
export class SomeComponent {
  constructor(private notificationService: NotificationService) {}

  showNotification() {
    this.notificationService.setMessage('Привет! Это уведомление.');
  }
}

Теперь, когда пользователь попытается получить доступ к закрытому роуту без авторизации, Guard перенаправит его на страницу входа, а уведомление будет отображаться в верхней части страницы. Если вы хотите использовать другие способы отображения уведомления, вы можете настроить компонент app-notification соответствующим образом.