DNext Angular DRAPMS Library¶

The @dnext-angular/drapms library provides a set of APIs for managing roles and permissions in Angular applications.

Installation¶

To install the library, use npm:

npm install @dnext-angular/drapms

Setup¶

Basic Setup¶

Import the necessary modules and services in your Angular application:

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { 
  CheckPermissionService,
  FetchPermissionService,
  PermissionSetService,
  PermissionSpecificationService,
  PermissionSpecificationSetService
} from '@dnext-angular/drapms';

@NgModule({
  imports: [
    HttpClientModule
  ],
  providers: [
    CheckPermissionService,
    FetchPermissionService,
    PermissionSetService,
    PermissionSpecificationService,
    PermissionSpecificationSetService
  ]
})
export class AppModule { }

Configuration Setup¶

Create a configuration file (e.g., auth-config.ts) for your environment settings:

import { IConfig } from '@dnext-angular/http';

export const authConfig: IConfig = {
  authRequired: true,
  baseURI: 'https://api.example.com',
  auth: {
    scope: 'openid profile email',
    responseType: 'code',
    issuer: 'https://your-issuer.com',
    redirectUri: window.location.origin,
    strictDiscoveryDocumentValidation: false,
    clientId: 'your-client-id',
    dummyClientSecret: 'your-client-secret'
  },
  rolesAndPermissionsManagementApi: 'https://api.example.com/roles-permissions'
};

Usage¶

CheckPermissionService¶

The CheckPermissionService handles permission checking operations.

Check Permission¶

import { CheckPermissionService } from '@dnext-angular/drapms';

constructor(private checkPermissionService: CheckPermissionService) {}

checkUserPermission(permissionData: CheckPermissionFVO) {
  this.checkPermissionService.checkPermission(permissionData)
    .subscribe({
      next: (response) => {
        console.log('Permission check result:', response);
      },
      error: (error) => {
        console.error('Error checking permission:', error);
      }
    });
}

FetchPermissionService¶

The FetchPermissionService handles fetching permissions.

Fetch Permissions¶

import { FetchPermissionService } from '@dnext-angular/drapms';

constructor(private fetchPermissionService: FetchPermissionService) {}

fetchPermissions(fetchData: FetchPermissionFVO) {
  this.fetchPermissionService.fetchPermission(fetchData)
    .subscribe({
      next: (permissions) => {
        console.log('Fetched permissions:', permissions);
      },
      error: (error) => {
        console.error('Error fetching permissions:', error);
      }
    });
}

PermissionSetService¶

The PermissionSetService handles operations related to permission sets.

Create Permission Set¶

import { PermissionSetService } from '@dnext-angular/drapms';

constructor(private permissionSetService: PermissionSetService) {}

createPermissionSet(permissionSetData: PermissionSetFVO) {
  this.permissionSetService.createPermissionSet(permissionSetData)
    .subscribe({
      next: (createdSet) => {
        console.log('Created permission set:', createdSet);
      },
      error: (error) => {
        console.error('Error creating permission set:', error);
      }
    });
}

Implementation Examples¶

1. Authentication Guard¶

Create an authentication guard to protect routes:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthorizationService } from '@dnext-angular/http';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthorizationService,
    private router: Router
  ) {}

  async canActivate(): Promise<boolean> {
    try {
      const isAuthenticated = await this.authService.setupAuthentication();
      if (!isAuthenticated) {
        this.router.navigate(['/login']);
        return false;
      }
      return true;
    } catch (error) {
      console.error('Authentication error:', error);
      return false;
    }
  }
}

2. Component Implementation Example¶

import { Component, OnInit } from '@angular/core';
import { CheckPermissionService } from '@dnext-angular/drapms';
import { CheckPermissionFVO } from './models';

@Component({
  selector: 'app-permission-check',
  template: `
    <div>
      <h2>Check User Permission</h2>
      <button (click)="checkPermission()">Check Permission</button>
    </div>
  `
})
export class PermissionCheckComponent implements OnInit {
  constructor(private checkPermissionService: CheckPermissionService) {}

  ngOnInit() {}

  checkPermission() {
    const permissionData: CheckPermissionFVO = {
      // Populate with necessary data
    };

    this.checkPermissionService.checkPermission(permissionData)
      .subscribe({
        next: (response) => {
          console.log('Permission check result:', response);
        },
        error: (error) => {
          console.error('Error checking permission:', error);
        }
      });
  }
}

3. Route Configuration¶

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { PermissionCheckComponent } from './permission-check.component';

const routes: Routes = [
  {
    path: 'check-permission',
    component: PermissionCheckComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Dependencies¶

@angular/core: >=18.0.1
@angular/common: >=18.0.1
@dnext-angular/http: >=1.2.1
@dnext-angular/common: >=1.1.1
rxjs: ^7.0.0

License¶

DNext PiAGroup