implement role support for angular authguard

admin/src/app/auth/auth.guard.ts

@@ -13,11 +13,32 @@ export class AuthGuard implements CanActivate {
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    if (this.authService.isLoggedIn()) {
+    const requiredRoles = route.data['roles'] as string[];
+
+    console.info("auth guard started", requiredRoles)
+
+    // 1. Check if the route requires any specific roles
+    if (!requiredRoles || requiredRoles.length === 0) {
+      // If no roles are required, only check if the user is logged in
+      return this.authService.isLoggedIn() ? true : this.router.parseUrl('/login');
+    }
+
+
+    // 2. Check if the user is logged in
+    if (!this.authService.isLoggedIn()) {
+      // If not logged in, redirect to the login page
+      return this.router.parseUrl('/login');
+    }
+
+    // 3. Check if the user has the required role
+    if (this.authService.hasRole(requiredRoles)) {
+      // If the user has the role, allow access
       return true;
     } else {
-      // Redirect to the login page
-      return this.router.createUrlTree(['/login']);
+      // If the user does not have the role, redirect to an unauthorized page
+      console.warn(`User does not have one of the required roles: ${requiredRoles}`);
+      return this.router.parseUrl('/welcome');
     }
+
   }
 }

admin/src/app/auth/auth.service.ts

@@ -1,8 +1,23 @@
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, of, throwError } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { Router } from '@angular/router';
+import { jwtDecode } from 'jwt-decode';
+
+
+interface User {
+  name: string;
+  roles: string[];
+}
+
+export interface DecodedToken {
+  name: string; // Or 'username', 'given_name', etc.
+  roles: string[]; // The claim can be a single string or an array
+  exp: number; // Expiration time (Unix timestamp)
+  // Add other claims you need, like 'sub' for user ID
+  sub: string;
+}
 
 @Injectable({
   providedIn: 'root',
@@ -12,11 +27,21 @@ export class AuthService {
   private readonly REFRESH_TOKEN_KEY = 'refreshToken';
   private apiUrl = 'http://localhost:4200/api/auth'; // Adjust if your server URL is different
 
-  constructor(private http: HttpClient, private router: Router) {}
+  currentUser = signal<User | null>(null);
+
+  constructor(private http: HttpClient, private router: Router) {
+    const accessToken = this.getAccessToken();
+    if (accessToken) {
+      this.decodeAndSetUser(accessToken);
+    }
+  }
 
   login(credentials: { username: string; password: string }): Observable<any> {
     return this.http.post<{ accessToken: string; refreshToken: string }>(`${this.apiUrl}/login`, credentials).pipe(
-      tap((response) => this.setTokens(response.accessToken, response.refreshToken))
+      tap((response) => {
+        this.setTokens(response.accessToken, response.refreshToken);
+        this.decodeAndSetUser(response.accessToken);
+      })
     );
   }
 
@@ -32,8 +57,9 @@ export class AuthService {
    * This is the definitive logout action from the user's perspective.
    */
   clientSideLogout(): void {
-    console.info("clientSideLogout")
+    console.info("clientSideLogout");
     this.removeTokens();
+    this.currentUser.set(null);
     this.router.navigate(['/login']);
   }
 
@@ -64,6 +90,15 @@ export class AuthService {
     return this.getAccessToken() !== null;
   }
 
+  hasRole(requiredRoles: string[]): boolean {
+    const user = this.currentUser();
+    if (!user) {
+      return false; // Not logged in, so no roles
+    }
+    // Check if any of the user's roles match any of the required roles
+    return requiredRoles.some(requiredRole => user.roles.includes(requiredRole));
+  }
+
   private setTokens(accessToken: string, refreshToken: string): void {
     localStorage.setItem(this.ACCESS_TOKEN_KEY, accessToken);
     localStorage.setItem(this.REFRESH_TOKEN_KEY, refreshToken);
@@ -73,4 +108,28 @@ export class AuthService {
     localStorage.removeItem(this.ACCESS_TOKEN_KEY);
     localStorage.removeItem(this.REFRESH_TOKEN_KEY);
   }
+
+  private decodeAndSetUser(token: string): void {
+    try {
+      const decodedToken: DecodedToken = jwtDecode(token);
+
+      // Check if the token is expired. exp is in seconds, Date.now() is in ms.
+      // if (decodedToken.exp * 1000 < Date.now()) {
+      //   console.warn('Attempted to use an expired token.');
+      //   this.logout(); // The token is expired, so log the user out
+      //   return;
+      // }
+
+      this.currentUser.set({
+        name: decodedToken.name,
+        roles: decodedToken.roles
+      });
+    } catch (error) {
+      console.error('Failed to decode JWT:', error);
+      this.currentUser.set(null);
+    }
+
+
+  }
+
 }