@flusys/ng-iam

Identity and Access Management UI for FLUSYS Angular apps — role management, permission assignment, and reactive permission checking via signals.

Installation

npm install @flusys/ng-iam @flusys/ng-core @flusys/ng-shared

1. Register Providers

// app.config.ts
import { provideIamProviders } from '@flusys/ng-iam';

export const appConfig: ApplicationConfig = {
  providers: [
    ...provideIamProviders(), // registers PROFILE_PERMISSION_PROVIDER for ng-shared's permission directives/guards
  ],
};

2. Add IAM Routes

// app.routes.ts
import { IAM_ROUTES } from '@flusys/ng-iam';

export const routes: Routes = [
  {
    path: 'iam',
    loadChildren: () => IAM_ROUTES,
  },
];

All routes are protected by permissionGuard using constants from ng-shared.

3. Load Permissions

Call PermissionStateService.loadPermissions() after login (e.g., in appInitGuard or after session restore). It fetches the current user's effective permissions from POST /iam/permissions/my-permissions and populates PermissionValidatorService from ng-shared.

import { PermissionStateService } from '@flusys/ng-iam';

@Component({ ... })
export class AppShellComponent {
  private readonly permState = inject(PermissionStateService);

  readonly permissions = this.permState.permissions; // Signal<IMyPermissionsResponseDto | null>
  readonly isLoading   = this.permState.isLoading;  // Signal<boolean>

  loadOnInit() {
    this.permState.loadPermissions().subscribe();
  }

  isLoaded() {
    return this.permState.isLoaded(); // true when permissions are set in PermissionValidatorService
  }
}

4. Check Permissions in Templates

Once provideIamProviders() is registered and loadPermissions() has been called, permission directives from ng-shared work automatically:

<!-- show element if user has the action code -->
<button *hasPermission="'product.update'">Edit</button>

<!-- show element if user has any of these action codes -->
<div *hasPermission="['admin.manage', 'product.delete']">Admin area</div>

Use permissionGuard from ng-shared to protect routes:

import { permissionGuard } from '@flusys/ng-shared';

{
  path: 'admin',
  canActivate: [permissionGuard('admin.manage')],
  loadComponent: () => import('./admin.component'),
}

License

MIT © FLUSYS