mesauth-angular 1.1.9 → 1.2.0

package/src/mes-auth.interceptor.ts

@@ -0,0 +1,59 @@
+import { inject } from '@angular/core';
+import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
+import { throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { MesAuthService } from './mes-auth.service';
+
+// Track if we're currently redirecting to prevent loopback
+let isRedirecting = false;
+
+/**
+ * Functional HTTP interceptor for handling 401/403 auth errors.
+ * Redirects to login page on 401, and to 403 page on 403.
+ * Includes loopback prevention to avoid infinite redirects.
+ */
+export const mesAuthInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(MesAuthService);
+  const router = inject(Router);
+
+  return next(req).pipe(
+    catchError((error: HttpErrorResponse) => {
+      const status = error.status;
+
+      // Check if we should handle this error and prevent loopback
+      if ((status === 401 || status === 403) && !isRedirecting) {
+        const config = authService.getConfig();
+        const baseUrl = config?.userBaseUrl || '';
+
+        const currentUrl = router.url + (window.location.hash || '');
+        const returnUrl = encodeURIComponent(currentUrl);
+
+        // Avoid loops if already on auth/unauth pages
+        const isLoginPage = currentUrl.includes('/login');
+        const is403Page = currentUrl.includes('/403');
+        const isAuthPage = currentUrl.includes('/auth');
+        // Skip redirect for the initial /auth/me check (app startup when not logged in)
+        const isMeAuthPage = req.url.includes('/auth/me');
+
+        if (status === 401 && !isLoginPage && !isAuthPage && !isMeAuthPage) {
+          // Session expired or not authenticated - redirect to login
+          // No isAuthenticated check: when session expires, BehaviorSubject still holds
+          // stale user data, so checking isAuthenticated would block the redirect.
+          isRedirecting = true;
+          setTimeout(() => { isRedirecting = false; }, 5000);
+          window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
+        } else if (status === 403 && !is403Page) {
+          isRedirecting = true;
+          setTimeout(() => { isRedirecting = false; }, 5000);
+          let redirectUrl = `${baseUrl}/403?returnUrl=${returnUrl}`;
+          if (error.error && error.error.required) {
+            redirectUrl += `&required=${encodeURIComponent(error.error.required)}`;
+          }
+          window.location.href = redirectUrl;
+        }
+      }
+      return throwError(() => error);
+    })
+  );
+};

package/src/mes-auth.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { MesAuthService } from './mes-auth.service';
+
+@NgModule({
+  providers: [
+    MesAuthService
+  ]
+})
+export class MesAuthModule {}

package/src/mes-auth.service.ts

@@ -0,0 +1,406 @@
+import { inject, Injectable, InjectionToken, EnvironmentProviders, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { HubConnection, HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
+import { BehaviorSubject, Subject, Observable, of, EMPTY } from 'rxjs';
+import { tap, catchError } from 'rxjs/operators';
+import { Router } from '@angular/router';
+
+export interface MesAuthConfig {
+  apiBaseUrl: string;
+  withCredentials?: boolean;
+  userBaseUrl?: string;
+}
+
+/** Injection token for MesAuth configuration */
+export const MES_AUTH_CONFIG = new InjectionToken<MesAuthConfig>('MES_AUTH_CONFIG');
+
+/**
+ * Provides MesAuth with configuration.
+ * This is the recommended way to set up mesauth-angular in standalone apps.
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideHttpClient(withInterceptors([mesAuthInterceptor])),
+ *     provideMesAuth({
+ *       apiBaseUrl: 'https://auth.example.com',
+ *       userBaseUrl: 'https://app.example.com'
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+export function provideMesAuth(config: MesAuthConfig): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    { provide: MES_AUTH_CONFIG, useValue: config },
+    MesAuthService,
+    provideAppInitializer(() => {
+      const mesAuthService = inject(MesAuthService);
+      const httpClient = inject(HttpClient);
+      const router = inject(Router);
+      mesAuthService.init(config, httpClient, router);
+    })
+  ]);
+}
+
+export interface IUser {
+  userId?: string;
+  userName?: string;
+  fullName?: string;
+  gender?: string;
+  email?: string;
+  phoneNumber?: string;
+  department?: string;
+  position?: string;
+  tokenVersion?: string;
+  permEndpoint?: string;
+  perms?: Set<string>;
+  employeeCode?: string;
+  avatarPath?: string;
+  loginMethod?: number;
+  hrFullNameVn?: string;
+  hrFullNameEn?: string;
+  hrPosition?: string;
+  hrJobTitle?: string;
+  hrGender?: string;
+  hrMobile?: string;
+  hrEmail?: string;
+  hrJoinDate?: string;
+  hrBirthDate?: string;
+  hrWorkStatus?: string;
+  hrDoiTuong?: string;
+  hrTeamCode?: string;
+  hrLineCode?: string;
+}
+
+export enum NotificationType {
+  Info = 'Info',
+  Warning = 'Warning',
+  Error = 'Error',
+  Success = 'Success'
+}
+
+export interface NotificationDto {
+  id: string;
+  title: string;
+  message: string;
+  messageHtml?: string;
+  url?: string;
+  type: NotificationType;
+  isRead: boolean;
+  createdAt: string;
+  sourceAppName: string;
+  sourceAppIconUrl?: string;
+}
+
+export interface FrontEndRoute {
+  id: number;
+  roleId: string;
+  roleName: string;
+  routePath: string;
+  routeName: string;
+  description?: string;
+  icon?: string;
+  cssClass?: string;
+  parentId?: number | null;
+  sortOrder: number;
+  isLabel: boolean;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt?: string;
+  children: FrontEndRoute[];
+}
+
+export interface UserFrontEndRoutesGrouped {
+  appId: string;
+  appName: string;
+  feUrl?: string;
+  routes: FrontEndRoute[];
+}
+
+export interface FrontEndRouteMaster {
+  id: number;
+  appId: string;
+  routePath: string;
+  routeName: string;
+  description?: string;
+  icon?: string;
+  cssClass?: string;
+  parentId?: number | null;
+  sortOrder: number;
+  isLabel: boolean;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt?: string;
+}
+
+export interface CreateFrontEndRouteDto {
+  routePath: string;
+  routeName: string;
+  description?: string;
+  icon?: string;
+  cssClass?: string;
+  parentId?: number | null;
+  sortOrder?: number;
+  isLabel?: boolean;
+}
+
+export interface PagedList<T> {
+  items: T[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  hasNext: boolean;
+  hasPrevious: boolean;
+}
+
+export interface RealTimeNotificationDto {
+  id: string;
+  title: string;
+  message: string;
+  messageHtml?: string;
+  url?: string;
+  type: NotificationType;
+  createdAt: string;
+  sourceAppName: string;
+  sourceAppIconUrl?: string;
+}
+
+@Injectable()
+export class MesAuthService {
+  private hubConnection: HubConnection | null = null;
+  private _currentUser = new BehaviorSubject<IUser | null>(null);
+  public currentUser$: Observable<IUser | null> = this._currentUser.asObservable();
+  private _notifications = new Subject<any>();
+  public notifications$: Observable<any> = this._notifications.asObservable();
+
+  private apiBase = '';
+  private config: MesAuthConfig | null = null;
+  private http!: HttpClient;
+  private router?: Router;
+
+  constructor() {
+    // Empty constructor - all dependencies passed to init()
+  }
+
+  init(config: MesAuthConfig, httpClient: HttpClient, router?: Router) {
+    this.config = config;
+    this.http = httpClient;
+    this.router = router;
+    this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
+
+    // Fetch user once on init. Route changes do NOT re-fetch the user.
+    // Auth state is maintained via cookies; 401 errors are handled by HTTP interceptors.
+    // SignalR handles real-time notification delivery without polling.
+    this.fetchCurrentUser().subscribe();
+  }
+
+  getConfig(): MesAuthConfig | null {
+    return this.config;
+  }
+
+  private fetchCurrentUser(): Observable<any> {
+    if (!this.apiBase) return EMPTY;
+    const url =  `${this.apiBase}/auth/me`;
+    return this.http.get(url, { withCredentials: this.config?.withCredentials ?? true }).pipe(
+      tap((u) => {
+        this._currentUser.next(u);
+        if (u && this.config) {
+          this.startConnection(this.config);
+        }
+      }),
+      catchError((err) => {
+        // Silently handle auth errors (401/403) - user is not logged in
+        if (err.status === 401 || err.status === 403) {
+          this._currentUser.next(null);
+        }
+        return of(null);
+      })
+    );
+  }
+
+  public getUnreadCount(): Observable<any> {
+    return this.http.get(`${this.apiBase}/notif/me/unread-count`, { withCredentials: this.config?.withCredentials ?? true });
+  }
+
+  public getNotifications(page: number = 1, pageSize: number = 20, includeRead: boolean = false, type?: string): Observable<any> {
+    let url = `${this.apiBase}/notif/me?page=${page}&pageSize=${pageSize}&includeRead=${includeRead}`;
+    if (type) {
+      url += `&type=${type}`;
+    }
+    return this.http.get(url, { withCredentials: this.config?.withCredentials ?? true });
+  }
+
+  public markAsRead(notificationId: string): Observable<any> {
+    return this.http.patch(`${this.apiBase}/notif/${notificationId}/read`, {}, { withCredentials: this.config?.withCredentials ?? true });
+  }
+
+  public markAllAsRead(): Observable<any> {
+    return this.http.patch(`${this.apiBase}/notif/me/read-all`, {}, { withCredentials: this.config?.withCredentials ?? true });
+  }
+
+  public deleteNotification(notificationId: string): Observable<any> {
+    return this.http.delete(`${this.apiBase}/notif/${notificationId}`, { withCredentials: this.config?.withCredentials ?? true });
+  }
+
+  /**
+   * Get frontend routes assigned to the current user
+   * Returns routes grouped by application
+   */
+  public getFrontEndRoutes(): Observable<UserFrontEndRoutesGrouped[]> {
+    if (!this.apiBase) throw new Error('MesAuth not initialized');
+    return this.http.get<UserFrontEndRoutesGrouped[]>(`${this.apiBase}/fe-routes/me`, { withCredentials: this.config?.withCredentials ?? true });
+  }
+
+  /**
+   * Get master routes for a specific application
+   * @param appId - The application ID
+   */
+  public getRouteMasters(appId: string): Observable<FrontEndRouteMaster[]> {
+    if (!this.apiBase) throw new Error('MesAuth not initialized');
+    return this.http.get<FrontEndRouteMaster[]>(`${this.apiBase}/fe-routes/masters/${appId}`, { withCredentials: this.config?.withCredentials ?? true });
+  }
+
+  /**
+   * Register/sync frontend routes for an application
+   * This is typically called on app startup to sync routes from the frontend app
+   * @param appId - The application ID (passed via X-App-Id header)
+   * @param routes - Array of route definitions
+   */
+  public registerFrontEndRoutes(appId: string, routes: CreateFrontEndRouteDto[]): Observable<any> {
+    if (!this.apiBase) throw new Error('MesAuth not initialized');
+    const headers = { 'X-App-Id': appId };
+    return this.http.post(`${this.apiBase}/fe-routes/register`, routes, {
+      headers,
+      withCredentials: this.config?.withCredentials ?? true
+    });
+  }
+
+  /**
+   * Create a new route master
+   * @param appId - The application ID
+   * @param route - Route details
+   */
+  public createRouteMaster(appId: string, route: CreateFrontEndRouteDto): Observable<FrontEndRouteMaster> {
+    if (!this.apiBase) throw new Error('MesAuth not initialized');
+    return this.http.post<FrontEndRouteMaster>(`${this.apiBase}/fe-routes/masters`, {
+      appId,
+      ...route
+    }, { withCredentials: this.config?.withCredentials ?? true });
+  }
+
+  /**
+   * Update an existing route master
+   * @param routeId - The route master ID
+   * @param route - Updated route details
+   */
+  public updateRouteMaster(routeId: number, route: Partial<CreateFrontEndRouteDto> & { isActive?: boolean }): Observable<FrontEndRouteMaster> {
+    if (!this.apiBase) throw new Error('MesAuth not initialized');
+    return this.http.put<FrontEndRouteMaster>(`${this.apiBase}/fe-routes/masters/${routeId}`, route, {
+      withCredentials: this.config?.withCredentials ?? true
+    });
+  }
+
+  /**
+   * Delete a route master
+   * @param routeId - The route master ID
+   */
+  public deleteRouteMaster(routeId: number): Observable<any> {
+    if (!this.apiBase) throw new Error('MesAuth not initialized');
+    return this.http.delete(`${this.apiBase}/fe-routes/masters/${routeId}`, {
+      withCredentials: this.config?.withCredentials ?? true
+    });
+  }
+
+  /**
+   * Assign a route to a role
+   * @param routeMasterId - The route master ID
+   * @param roleId - The role ID (GUID)
+   */
+  public assignRouteToRole(routeMasterId: number, roleId: string): Observable<any> {
+    if (!this.apiBase) throw new Error('MesAuth not initialized');
+    return this.http.post(`${this.apiBase}/fe-routes/mappings`, {
+      routeMasterId,
+      roleId
+    }, { withCredentials: this.config?.withCredentials ?? true });
+  }
+
+  /**
+   * Remove a route assignment from a role
+   * @param mappingId - The mapping ID
+   */
+  public removeRouteFromRole(mappingId: number): Observable<any> {
+    if (!this.apiBase) throw new Error('MesAuth not initialized');
+    return this.http.delete(`${this.apiBase}/fe-routes/mappings/${mappingId}`, {
+      withCredentials: this.config?.withCredentials ?? true
+    });
+  }
+
+  /**
+   * Get route-to-role mappings for a specific role
+   * @param roleId - The role ID (GUID)
+   */
+  public getRouteMappingsByRole(roleId: string): Observable<any[]> {
+    if (!this.apiBase) throw new Error('MesAuth not initialized');
+    return this.http.get<any[]>(`${this.apiBase}/fe-routes/mappings?roleId=${roleId}`, {
+      withCredentials: this.config?.withCredentials ?? true
+    });
+  }
+
+  private startConnection(config: MesAuthConfig) {
+    if (this.hubConnection) return;
+    const signalrUrl = config.apiBaseUrl.replace(/\/$/, '') + '/hub/notification';
+    const builder = new HubConnectionBuilder()
+      .withUrl(signalrUrl, { withCredentials: config.withCredentials ?? true })
+      .withAutomaticReconnect()
+      .configureLogging(LogLevel.Warning);
+
+    this.hubConnection = builder.build();
+
+    this.hubConnection.on('ReceiveNotification', (n: any) => {
+      this._notifications.next(n);
+    });
+
+    this.hubConnection.start().then(() => {}).catch((err) => {});
+
+    this.hubConnection.onclose(() => {});
+    this.hubConnection.onreconnecting(() => {});
+    this.hubConnection.onreconnected(() => {});
+  }
+
+  public stop() {
+    if (!this.hubConnection) return;
+    this.hubConnection.stop().catch(() => {});
+    this.hubConnection = null;
+  }
+
+  public logout(): Observable<any> {
+    const url = `${this.apiBase}/auth/logout`;
+    return this.http.post(url, {}, { withCredentials: this.config?.withCredentials ?? true }).pipe(
+      tap(() => {
+        this._currentUser.next(null);
+        this.stop();
+      })
+    );
+  }
+
+  public get currentUser(): IUser | null {
+    return this._currentUser.value;
+  }
+
+  public get isAuthenticated(): boolean {
+    return this._currentUser.value !== null;
+  }
+
+  /**
+   * Refreshes the current user from the server.
+   * Returns an Observable that completes when the user data is loaded.
+   * Callers can subscribe to wait for completion before proceeding (e.g., navigating after login).
+   */
+  public refreshUser(): Observable<any> {
+    return this.fetchCurrentUser();
+  }
+}

package/src/notification-badge.component.ts

@@ -0,0 +1,125 @@
+import { Component, OnInit, OnDestroy, Output, EventEmitter, HostBinding } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { MesAuthService } from './mes-auth.service';
+import { ThemeService, Theme } from './theme.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'ma-notification-badge',
+  standalone: true,
+  imports: [NgIf],
+  template: `
+    <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
+      <span class="icon">🔔</span>
+      <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
+    </button>
+  `,
+  styles: [`
+    :host {
+      --error-color: #f44336;
+    }
+
+    :host(.theme-dark) {
+      --error-color: #ef5350;
+    }
+
+    .notification-btn {
+      position: relative;
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      padding: 8px;
+      transition: opacity 0.2s;
+    }
+
+    .notification-btn:hover {
+      opacity: 0.7;
+    }
+
+    .icon {
+      display: inline-block;
+    }
+
+    .badge {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: var(--error-color);
+      color: white;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: bold;
+    }
+  `]
+})
+export class NotificationBadgeComponent implements OnInit, OnDestroy {
+  @Output() notificationClick = new EventEmitter<void>();
+  @HostBinding('class') get themeClass(): string {
+    return `theme-${this.currentTheme}`;
+  }
+  
+  unreadCount = 0;
+  currentTheme: Theme = 'light';
+  private hasUser = false;
+  private destroy$ = new Subject<void>();
+
+  constructor(private authService: MesAuthService, private themeService: ThemeService) {}
+
+  ngOnInit() {
+    this.themeService.currentTheme$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(theme => {
+        this.currentTheme = theme;
+      });
+
+    this.authService.currentUser$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(user => {
+        this.hasUser = !!user;
+        if (!this.hasUser) {
+          this.unreadCount = 0;
+          return;
+        }
+        this.loadUnreadCount();
+      });
+    
+    // Listen for new notifications
+    this.authService.notifications$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        if (this.hasUser) {
+          this.loadUnreadCount();
+        }
+      });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private loadUnreadCount() {
+    if (!this.hasUser) {
+      this.unreadCount = 0;
+      return;
+    }
+
+    this.authService.getUnreadCount().subscribe({
+      next: (response: any) => {
+        this.unreadCount = response.unreadCount || 0;
+      },
+      error: (err) => console.error('Error loading unread count:', err)
+    });
+  }
+
+  onNotificationClick() {
+    this.notificationClick.emit();
+  }
+}