Implement AuthGuard for route protection, integrate authorization checks into particles route, and simplify HeaderComponent access logic. Remove redundant debug logging in auth.service.ts.

frontend/src/app/app.routes.ts

@@ -1,4 +1,5 @@
 import {Routes} from '@angular/router';
+import {AuthGuard} from './guards/auth.guard';
 
 export const routes: Routes = [
   {
@@ -7,7 +8,11 @@ export const routes: Routes = [
   },
   {
     path: 'particles',
-    loadComponent: () => import('./pages/particles/particles.component').then(m => m.ParticlesComponent)
+    loadComponent: () => import('./pages/particles/particles.component').then(m => m.ParticlesComponent),
+    canActivate: [AuthGuard],
+    data: {
+      requiredAuthorizations: ['SCOPE_head_mod']
+    }
   },
   {
     path: 'map',

frontend/src/app/guards/auth.guard.ts

@@ -0,0 +1,41 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
+import {Observable} from 'rxjs';
+import {AuthService} from '@services/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+
+  constructor(
+    private authService: AuthService,
+    private router: Router
+  ) {
+  }
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+
+    if (!this.authService.checkAuthStatus()) {
+      return this.router.createUrlTree(['/']);
+    }
+
+    const requiredAuthorizations = route.data['requiredAuthorizations'] as string[];
+
+    if (!requiredAuthorizations || requiredAuthorizations.length === 0) {
+      return true;
+    }
+
+    const userAuthorizations = this.authService.getUserAuthorizations();
+    const hasAccess = requiredAuthorizations.some(auth => userAuthorizations.includes(auth));
+
+    if (!hasAccess) {
+      return this.router.createUrlTree(['/']);
+    }
+
+    return true;
+  }
+}

frontend/src/app/pages/header/header/header.component.html

@@ -141,11 +141,9 @@
             <li class="nav_li">
               <a [id]="getCurrentPageId(['particles'])"
                  class="nav_link fake_link" [ngClass]="active">Special</a>
-              @if (hasAccess(['SCOPE_head_mod'])) {
+              <ul class="dropdown">
-                <ul class="dropdown">
+                <li class="nav_li"><a class="nav_link2" [routerLink]="['/particles']">Particles</a></li>
-                  <li class="nav_li"><a class="nav_link2" [routerLink]="['/particles']">Particles</a></li>
+              </ul>
-                </ul>
-              }
             </li>
           }
           @if (!isAuthenticated) {

frontend/src/app/services/auth.service.ts

@@ -105,15 +105,11 @@ export class AuthService {
    */
   public getUserAuthorizations(): string[] {
     const claims = this.userClaimsSubject.getValue();
-    console.log("Retrieved user claims: ", claims);
     return claims?.authorities || [];
   }
 
   public hasAccess(requiredAuthorizations: string[]): boolean {
     const userAuthorizations = this.getUserAuthorizations();
-    console.log("Required: ", requiredAuthorizations);
-    console.log("Auth: ", userAuthorizations);
-    console.log("hasAccess: ", requiredAuthorizations.some(auth => userAuthorizations.includes(auth)));
     return requiredAuthorizations.some(auth => userAuthorizations.includes(auth));
   }
 }