Как повторно использовать логику canActivate/canChildActivate для якорных элементов одного и того же маршрута?

Вопрос или проблема

Как повторно использовать логику canActivate/canChildActivate для якорных элементов одного и того же маршрута?

export const routes: Routes =[
{
    path: '', component: DefaultLayoutComponent, canActivate: [AuthGuard], canActivateChild: [AuthGuard],
    children: [
      { path: 'dashboard', component: DashboardComponent },
      {
        path: 'admin-only', component: AdminOnlyComponent,
        data: { authorize: (c: any) => c.role == "Admin" }
      },
      {
        path: 'admin-or-teacher', component: AdminOrTeacherComponent,
        data: { authorize: (c: any) => c.role == "Admin" || c.role == "Teacher" }
      }
]

<ul class="nav flex-column w-100 px-3">
    <li class="nav-item">
      <a class="nav-link" routerLink="/admin-only">Только для администраторов</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/admin-or-teacher">Администратор или Учитель</a>
    </li>
</ul>

Ответ или решение

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

1. Создание Сервиса Для Проверки Прав Доступа

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

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service'; // Ваш сервис аутентификации
import { User } from './user.model'; // Модель пользователя

@Injectable({
  providedIn: 'root'
})
export class AuthorizationService {
  constructor(private authService: AuthService) {}

  canAccess(route: string): boolean {
    const user: User = this.authService.getCurrentUser(); // Получаем текущего пользователя

    switch (route) {
      case 'admin-only':
        return user.role === 'Admin';
      case 'admin-or-teacher':
        return user.role === 'Admin' || user.role === 'Teacher';
      default:
        return false;
    }
  }
}

1. Обновление Компонента Навигации

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

import { Component } from '@angular/core';
import { AuthorizationService } from './authorization.service'; // Импортируйте ваш сервис авторизации

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
  constructor(private authorizationService: AuthorizationService) {}

  canAccessAdminOnly(): boolean {
    return this.authorizationService.canAccess('admin-only');
  }

  canAccessAdminOrTeacher(): boolean {
    return this.authorizationService.canAccess('admin-or-teacher');
  }
}

1. Обновление Шаблона HTML

Наконец, обновите ваш шаблон HTML, чтобы скрыть или показать ссылки в зависимости от результатов проверки.

<ul class="nav flex-column w-100 px-3">
  <li class="nav-item" *ngIf="canAccessAdminOnly()">
    <a class="nav-link" routerLink="/admin-only">Admin Only</a>
  </li>
  <li class="nav-item" *ngIf="canAccessAdminOrTeacher()">
    <a class="nav-link" routerLink="/admin-or-teacher">Admin Or Teacher</a>
  </li>
</ul>

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