Ngx-security NPM

Ngx-Security

:closed_lock_with_key: Security directives for your Angular application to show/hide elements based on a user roles / permissions.

View changelog

View migration guide

Installation

Install the library with:

npm install ngx-security --save

Then import it in your AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgxSecurityModule } from 'ngx-security';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    
    // Importing ngx-security module
    NgxSecurityModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

The security directives use a security state controlled by the NgxSecurityService.
You need to set/change this state to use the directives:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NgxSecurityService } from 'ngx-security';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html'
})
export class SampleComponent
{
  constructor(
    private http: HttpClient,
    private security: NgxSecurityService
  ) {}

  login() {
    this.security.setAuthenticationChecker(() => {
      return of(true);
    });
    
    this.security.setPermissionChecker((perm: string) => {
      return this.http.get(`/api/auth/permissions/has/${perm}`).pipe(
        map(() => true)
      );
    });
  }
  
  logout() {
    // Reset the security state to it's initial value
    this.security.reset();
  }
}

Of course, you can change the security state wherever and whenever you want !

You can now use the differents directives and the guard.

Directives

IsAuthenticated

<div *secuIsAuthenticated>I'm authenticated !</div>

IsAnonymous

<div *secuIsAnonymous>I'm an anonymous user (not authenticated)</div>

HasRoles / HasPermissions / IsMemberOf

<div *secuHasRoles="'ADMIN'">I have the role 'ADMIN'</div>
<div *secuHasRoles="['CREATOR', 'EDITOR']; else roleElse">I have the role 'CREATOR' and 'EDITOR'</div>
<ng-template #roleElse>
  <div>I don't have the roles</div>
</ng-template>

HasAnyRoles / HasAnyPermissions / IsMemberOfAny

<div *secuHasAnyRoles="['CREATOR', 'EDITOR']; else roleElse">I have the role 'CREATOR' or 'EDITOR'</div>
<ng-template #roleElse>
  <div>I don't have the roles</div>
</ng-template>

HasNotRoles / HasNotPermissions / IsNotMemberOf

<div *secuHasNotRoles="'POWERUSER'">I don't have the role 'POWERUSER'</div>

Route Guard

The NgxSecurityGuard can prevent an unauthorized user to load / access parts of your application.

import {
  ActivatedRouteSnapshot,
  Route, Routes,
  RouterStateSnapshot
} from '@angular/router';

import { NgxSecurityGuard } from 'ngx-security';

export const ROUTES: Routes = [
  {
    path: 'secured-page',
    canActivate: [ NgxSecurityGuard ],
    data: {
      security: {
        isAuthenticated: true,
        hasAllRoles: ['ADMIN', 'USER'],
        redirectTo: '/access-denied',
        unauthorizedHandler: (route: Route | ActivatedRouteSnapshot, state?: RouterStateSnapshot) => {
          console.warn('No, no, no, you cannot access this !');
        }
      }
    },
    component: SecuredComponent
  }
];

Tips

Log unauthorized access

You can use the unauthorizedHandler to log unauthorized access to route path :

unauthorizedHandler: (route: Route | ActivatedRouteSnapshot, state?: RouterStateSnapshot) => {
  let path = (state ? state.url : null);
    if (!path && route) {
      path = '/' + (route as Route).path;
    }
  
    console.warn('Unauthorized access', path);
}