refs #2089 and #2091 Implement AuthService for user authentication and role management

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -29,6 +29,7 @@ import { MatMenuTrigger } from '@angular/material/menu';
 import { ClientDetailsComponent } from './shared/client-details/client-details.component';
 import { PartitionTypeOrganizatorComponent } from './shared/partition-type-organizator/partition-type-organizator.component';
 import { ClientTaskLogsComponent } from '../task-logs/client-task-logs/client-task-logs.component';
+import { AuthService } from '@services/auth.service';
 
 enum NodeType {
   OrganizationalUnit = 'organizational-unit',
@@ -114,6 +115,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     private joyrideService: JoyrideService,
     private breakpointObserver: BreakpointObserver,
     private toastr: ToastrService,
+    private auth: AuthService,
     private configService: ConfigService,
     private cd: ChangeDetectorRef,
   ) {
@@ -132,7 +134,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     );
 
     this.treeDataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
-    this.currentView = localStorage.getItem('groupsView') || 'list';
+    this.currentView = this.auth.groupsView || 'list';
   }
 
 

ogWebconsole/src/app/components/login/login.component.ts

@@ -3,10 +3,10 @@ import { Component, signal } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { ToastrService } from "ngx-toastr";
-import { jwtDecode } from "jwt-decode";
 import { ConfigService } from '@services/config.service';
 import { MatDialog } from '@angular/material/dialog';
 import { GlobalStatusComponent } from '../global-status/global-status.component'
+import { AuthService } from '@services/auth.service';
 
 @Component({
   selector: 'app-login',
@@ -20,8 +20,6 @@ export class LoginComponent {
   };
   errorMessage: string = '';
   isLoading: boolean = false;
-  decodedToken: any;
-
   baseUrl: string;
 
   constructor(
@@ -29,6 +27,7 @@ export class LoginComponent {
     private router: Router,
     private configService: ConfigService,
     private toastService: ToastrService,
+    private auth: AuthService,
     private translateService: TranslateService,
     private dialog: MatDialog
   ) {
@@ -62,13 +61,8 @@ export class LoginComponent {
       next: (res: any) => {
         if (res.token) {
           localStorage.setItem('loginToken', res.token);
-          localStorage.setItem('refreshToken', res.refreshToken);
-          localStorage.setItem('username', this.loginObj.username);
-
-          this.decodedToken = jwtDecode(res.token);
-          localStorage.setItem('groupsView', this.decodedToken.groupsView);
-
-          this.openSnackBar(false, 'Bienvenido ' + this.loginObj.username);
+          this.auth.refresh();
+          this.openSnackBar(false, 'Bienvenido ' + this.auth.username);
           this.router.navigateByUrl('/groups');
           this.dialog.open(GlobalStatusComponent, {
             width: '45vw',

ogWebconsole/src/app/layout/header/header.component.html

@@ -18,17 +18,17 @@
         {{ 'GlobalStatus' | translate }}
       </button>
 
-      <button class="ordinary-button" *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu"
+      <button class="ordinary-button" *ngIf="auth.userCategory === 'super-admin'" [matMenuTriggerFor]="menu"
         matTooltip="Gestión de usuarios y roles de la aplicación" matTooltipShowDelay="1000">
         {{ 'Administration' | translate }}
       </button>
 
-      <button class="ordinary-button" *ngIf="!isSuperAdmin" (click)="editUser()"
+      <button class="ordinary-button" *ngIf="auth.userCategory === 'super-admin'" (click)="editUser()"
         matTooltip="Editar tu información de usuario" matTooltipShowDelay="1000">
         {{ 'changePassword' | translate }}
       </button>
 
-      <button class="logout-button" routerLink="/auth/login" matTooltip="Cerrar sesión y salir de la aplicación"
+      <button class="logout-button" (click)="logOut()" matTooltip="Cerrar sesión y salir de la aplicación"
         matTooltipShowDelay="1000">
         {{ 'logout' | translate }}
       </button>
@@ -47,10 +47,10 @@
       <button mat-menu-item (click)="showGlobalStatus()">
         {{ 'GlobalStatus' | translate }}
       </button>
-      <button mat-menu-item *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu">
+      <button mat-menu-item *ngIf="auth.userCategory === 'super-admin'" [matMenuTriggerFor]="menu">
         {{ 'Administration' | translate }}
       </button>
-      <button mat-menu-item *ngIf="!isSuperAdmin" (click)="editUser()">
+      <button mat-menu-item *ngIf="auth.userCategory === 'super-admin'" (click)="editUser()">
         {{ 'changePassword' | translate }}
       </button>
     </mat-menu>

ogWebconsole/src/app/layout/header/header.component.ts

@@ -1,9 +1,9 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { jwtDecode } from 'jwt-decode';
 import { ChangePasswordModalComponent } from '../../components/admin/users/users/change-password-modal/change-password-modal.component';
 import { MatDialog } from "@angular/material/dialog";
 import { GlobalStatusComponent } from 'src/app/components/global-status/global-status.component';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { AuthService } from '@services/auth.service';
 
 @Component({
   selector: 'app-header',
@@ -16,39 +16,26 @@ export class HeaderComponent implements OnInit {
   isSmallScreen: boolean = false;
 
   @Output() toggleSidebar = new EventEmitter<void>();
-  private decodedToken: any;
-  private username: any;
 
   onToggleSidebar() {
     this.toggleSidebar.emit();
   }
 
-  constructor(public dialog: MatDialog, private breakpointObserver: BreakpointObserver) { }
+  constructor(
+    public dialog: MatDialog,
+    public auth: AuthService,
+    private breakpointObserver: BreakpointObserver
+  ) { }
 
   ngOnInit(): void {
-    const token = localStorage.getItem('loginToken');
-    if (token) {
-      try {
-        this.decodedToken = jwtDecode(token);
-        this.isSuperAdmin = this.decodedToken.roles.includes('ROLE_SUPER_ADMIN');
-        localStorage.setItem('isSuperAdmin', String(this.isSuperAdmin));
-        this.username = this.decodedToken.username;
-      } catch (error) {
-        console.error('Error decoding JWT:', error);
-      }
-    }
     this.breakpointObserver.observe(['(max-width: 576px)']).subscribe((result) => {
       this.isSmallScreen = result.matches;
     })
   }
 
-  ngDoCheck(): void {
-    this.isSuperAdmin = localStorage.getItem('isSuperAdmin') === 'true';
-  }
-
   editUser() {
     const dialogRef = this.dialog.open(ChangePasswordModalComponent, {
-      data: { user: this.decodedToken.username, uuid: this.decodedToken.uuid },
+      data: { user: this.auth.username, uuid: this.auth.uuid },
       width: '400px',
     });
   }
@@ -56,7 +43,11 @@ export class HeaderComponent implements OnInit {
   showGlobalStatus() {
     this.dialog.open(GlobalStatusComponent, {
       width: '45vw',
-      height: '80vh', 
+      height: '80vh',
     })
   }
+
+  logOut() {
+    this.auth.logout();
+  }
 }

ogWebconsole/src/app/layout/sidebar/sidebar.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { jwtDecode } from 'jwt-decode';
 import { MatDialog } from '@angular/material/dialog';
+import { AuthService } from '@services/auth.service';
 
 @Component({
   selector: 'app-sidebar',
@@ -12,9 +13,7 @@ export class SidebarComponent {
   @Input() sidebarMode: 'side' | 'over' = 'side';
   @Output() closeSidebar: EventEmitter<void> = new EventEmitter<void>();
 
-  isSuperAdmin: boolean = false;
-  username: string = "";
-  decodedToken: any = "";
+  username: string | null = "";
   showOgBootSub: boolean = false;
   showOgDhcpSub: boolean = false;
   showCommandSub: boolean = false;
@@ -39,19 +38,9 @@ export class SidebarComponent {
     }
   }
 
-  constructor(public dialog: MatDialog) {}
+  constructor(public dialog: MatDialog, public auth: AuthService,) {}
 
   ngOnInit(): void {
-    const token = localStorage.getItem('loginToken');
-    if (token) {
-      try {
-        this.decodedToken = jwtDecode(token);
-        this.isSuperAdmin = this.decodedToken.roles.includes('ROLE_SUPER_ADMIN');
-        localStorage.setItem('isSuperAdmin', String(this.isSuperAdmin));
-        this.username = this.decodedToken.username;
-      } catch (error) {
-        console.error('Error decoding JWT:', error);
-      }
-    }
+    this.username = this.auth.username
   }
 }

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

@@ -0,0 +1,108 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { jwtDecode } from 'jwt-decode';
+
+export type UserCategory =
+  | 'super-admin'
+  | 'ou-admin'
+  | 'ou-operator'
+  | 'ou-minimal'
+  | 'user';
+
+interface JwtPayload {
+  roles: string[];
+  username: string;
+  id: number;
+  uuid: string;
+  groupsView: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  private tokenPayload: JwtPayload | null = null;
+
+  constructor(private router: Router) {
+    this.loadToken();
+  }
+
+  /** Intenta leer y decodificar el token de localStorage */
+  private loadToken() {
+    const token = localStorage.getItem('loginToken');
+    if (!token) return;
+    try {
+      this.tokenPayload = jwtDecode<JwtPayload>(token);
+    } catch (e) {
+      console.error('Error decoding JWT', e);
+      this.tokenPayload = null;
+    }
+  }
+
+  /** Fuerza recarga del token (por si cambió en localStorage) */
+  public refresh() {
+    this.loadToken();
+  }
+
+  /** Roles básicos que aparecen en el token */
+  private get roles(): string[] {
+    return this.tokenPayload?.roles || [];
+  }
+
+  get isSuperAdmin(): boolean {
+    return this.roles.includes('ROLE_SUPER_ADMIN');
+  }
+
+  get isOUAdmin(): boolean {
+    return this.roles.includes('ROLE_ORGANIZATIONAL_UNIT_ADMIN');
+  }
+
+  get isOUOperator(): boolean {
+    return this.roles.includes('ROLE_ORGANIZATIONAL_UNIT_OPERATOR');
+  }
+
+  get isOUMinimal(): boolean {
+    return this.roles.includes('ROLE_ORGANIZATIONAL_UNIT_MINIMAL');
+  }
+
+  /**
+   * Categoría única de usuario, según prioridades:
+   * - super-admin
+   * - ou-admin
+   * - ou-operator
+   * - ou-minimal
+   * - user (fallback)
+   */
+  get userCategory(): UserCategory {
+    if (this.isSuperAdmin) return 'super-admin';
+    if (this.isOUAdmin) return 'ou-admin';
+    if (this.isOUOperator) return 'ou-operator';
+    if (this.isOUMinimal) return 'ou-minimal';
+    return 'user';
+  }
+
+  /** Nombre de usuario */
+  get username(): string | null {
+    return this.tokenPayload?.username || null;
+  }
+
+  /** Uuid del usuario*/
+  get uuid(): any | null {
+    return this.tokenPayload?.uuid || null;
+  }
+
+  /** groupsView del usuario */
+  get groupsView(): string | null {
+    return this.tokenPayload?.groupsView || null;
+  }
+
+  /** Logout: limpia tokens y redirige al login */
+  logout(): void {
+    localStorage.removeItem('loginToken');
+    localStorage.removeItem('refreshToken');
+    localStorage.removeItem('isSuperAdmin');
+    localStorage.removeItem('username');
+    localStorage.removeItem('groupsView');
+    localStorage.removeItem('language');
+    this.tokenPayload = null;
+    this.router.navigate(['/auth/login']);
+  }
+}