ngx-role-permissions
    TypeScript icon, indicating that this package has built-in type declarations

    2.5.0 • Public • Published

    ngx-role-permissions

    npm version Build Status

    Permission and roles based access control for your angular(angular 6,7,8+) applications

    Documentation and examples

    v2.0.0 have critical changes

    see CHANGELOG.MD

    Demo

    Demo ngx-role-permissions

    Installation

    To install this library, run:

    $ npm install ngx-role-permissions --save

    Consuming library

    You can import library in any Angular application by running:

    $ npm install ngx-role-permissions  --save

    and then from your Angular AppModule:

    use NgxPermissionModule with withElements in any of your modules use LockTypes.UNLOCKABLE provide roles for which elements will be available LockTypes.UNLOCKABLE tells if current element will be block with specified roles

    As anther aproach provide PERMISSION_CONFIG_TOKEN token with doorlock use lockWith declaration to declare blocking keys use unlockWith as an opposite to lockWith

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
     
    import { AppComponent } from './app.component';
     
    // Import your library
    import { NgxPermissionModule, LockTypes, PERMISSION_CONFIG_TOKEN, doorlock } from 'ngx-role-permissions';
     
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
     
        // Specify your library as an import
         NgxPermissionModule.withElements([
           {name: 'yourElement1', lockType: LockTypes.UNLOCKABLE, keys: ['user', 'admin']},
           {name: 'yourElement2', lockType: LockTypes.LOCKABLE, keys: ['user']},
         ]),
      ],
      {
          provide: PERMISSION_CONFIG_TOKEN,
          multi: true,
          useValue: [
            doorlock(PermElementTypes.PAGE_ELEMENT).lockWith(['admin']),
            doorlock(PermElementTypes.CHILD_ONE).unlockWith(['user', 'admin']),
          ],
        }
      bootstrap[AppComponent]
    })
    export class AppModule { }

    Providing initial roles: INITIAL_ROLES is multitoken that can provide initial roles

    @NgModule({
      ...
      imports[
        // Specify your library as an import
         NgxPermissionModule.withElements([
           ...
         ]),
      ],
      providers: [
          provideINITIAL_ROLES,
          multitrue,
          useValue['user'], //your roles
      ]
    })
    export class AppModule { }

    SharedModule

    If you use a SharedModule that you import in multiple other feature modules, you can export the NgxPermissionModule to make sure you don't have to import it in every module. NgxPermissionModule with or without withElementsnotations provides canPermit and canNotPermit directive so you should import it in every module you use permission directives.

    @NgModule({
        exports: [
            CommonModule,
            NgxPermissionModule,
        ]
    })
    export class SharedModule { }

    Once your library is imported, you can use its components, directives and pipes in your Angular application:

    Import service to the main application and load permissions

    import { Component, OnInit } from '@angular/core';
    import { PermissionService } from 'ngx-role-permissions';
     
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      title = 'ngx-role-permissions';
     
      constructor(
        private permissionService: PermissionService,
      ) {}
     
      public ngOnInit(): void {
        this.permissionService.setRoles([
          'user',
        ]);
     
        // append role
        this.permissionService.addRole('admin');
     
        // remove role
        this.permissionService.removeRole('admin');
      }
    }
     

    Usage in templates

    *canPermit check if element roles includes current user role

    <div class="element-two" *canPermit="'yourFeatureElement1'">
        Feature element one directive example
    </div>

    *canNotPermit check if element roles excludes current user role

    <div class="element-two" *canNotPermit="'yourFeatureElement1'">
        Feature element one directive example
    </div>

    Managing permissions

    Usage in routing guards: permissionConfig placed in data declare route configuration. permission element - name of element which defined in module. redirectRoute - router path to redirect page if current route is blocked. If redirectRoute was not defined no redirect will be done

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { PermissionGuard } from 'ngx-role-permissions';
     
    const routes: Routes = [
      {
        path: 'one',
        component: ChildComponent1,
        canActivate: [PermissionGuard],
        data: {
          permissionConfig: {
            permissionElement: 'yourFeatureElement2',
          }
        }
      },
      {
        path: 'two',
        component: ChildComponent2,
        canActivate: [PermissionGuard],
        data: {
          permissionConfig: {
            permissionElement: 'yourFeatureElement2',
            redirectRoute: '/dashboard',
          }
        }
      }
    ];
     
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class ChildTwoRoutingModule { }

    Usage in custom directives/guards/components etc.

    @Directive({
      selector: '[canAccess]',
    })
    export class CanPermitDirective implements OnChanges, OnDestroy {
      private permissionSubscription: SubscriptionLike;
     
      constructor(
        private permissionService: PermissionService,
        private viewContainer: ViewContainerRef,
        private templateRef: TemplateRef<any>,
      ) {}
     
      @Input() canAccess: string;
     
      public ngOnChanges(changes: SimpleChanges): void {
        this.initPermissionCheck(changes.canPermit.currentValue);
      }
     
      public ngOnDestroy(): void {
        this.permissionSubscription.unsubscribe();
        this.permissionSubscription = null;
      }
     
      private initPermissionCheck(elementName: string): void {
        if (!!this.permissionSubscription) {
          this.permissionSubscription.unsubscribe();
          this.permissionSubscription = null;
        }
     
        this.permissionSubscription = this.permissionService.canAccess(elementName)
          .subscribe((res: boolean) => {
            if (!!res && !!this.templateRef) {
              this.viewContainer.clear();
              this.viewContainer.createEmbeddedView(this.templateRef, {});
            } else {
              this.viewContainer.clear();
            }
          });
      }
    }

    For google

    angular permissions, angular 6 permissions, angular permissions, angular 6 permissions ng2 permissions ng permissions ng-permissions ng2-permissions angular2 permissions angular4 permissions angular 5 permissions

    Install

    npm i ngx-role-permissions

    DownloadsWeekly Downloads

    8

    Version

    2.5.0

    License

    MIT

    Unpacked Size

    314 kB

    Total Files

    56

    Last publish

    Collaborators

    • grachpower