项目作者: mselerin

项目描述 :
Security directives for your Angular application to show/hide elements based on a user roles / permissions.
高级语言: TypeScript
项目地址: git://github.com/mselerin/ngx-security.git
创建时间: 2018-10-03T08:11:54Z
项目社区:https://github.com/mselerin/ngx-security

开源协议:MIT License

下载


Ngx-Security

License: MIT
npm
CI
codecov

: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:

  1. npm install ngx-security --save

Then import it in your AppModule:

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { AppComponent } from './app.component';
  4. // Import your library
  5. import { NgxSecurityModule } from 'ngx-security';
  6. @NgModule({
  7. declarations: [
  8. AppComponent
  9. ],
  10. imports: [
  11. BrowserModule,
  12. // Importing ngx-security module
  13. NgxSecurityModule
  14. ],
  15. providers: [],
  16. bootstrap: [AppComponent]
  17. })
  18. 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:

  1. import { Component, OnInit } from '@angular/core';
  2. import { HttpClient } from '@angular/common/http';
  3. import { NgxSecurityService } from 'ngx-security';
  4. @Component({
  5. selector: 'app-sample',
  6. templateUrl: './sample.component.html'
  7. })
  8. export class SampleComponent
  9. {
  10. constructor(
  11. private http: HttpClient,
  12. private security: NgxSecurityService
  13. ) {}
  14. login() {
  15. this.security.setAuthenticationChecker(() => {
  16. return of(true);
  17. });
  18. this.security.setPermissionChecker((perm: string) => {
  19. return this.http.get(`/api/auth/permissions/has/${perm}`).pipe(
  20. map(() => true)
  21. );
  22. });
  23. }
  24. logout() {
  25. // Reset the security state to it's initial value
  26. this.security.reset();
  27. }
  28. }

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

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

IsAnonymous

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

HasRoles / HasPermissions / IsMemberOf

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

HasAnyRoles / HasAnyPermissions / IsMemberOfAny

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

HasNotRoles / HasNotPermissions / IsNotMemberOf

  1. <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.

  1. import {
  2. ActivatedRouteSnapshot,
  3. Route, Routes,
  4. RouterStateSnapshot
  5. } from '@angular/router';
  6. import { NgxSecurityGuard } from 'ngx-security';
  7. export const ROUTES: Routes = [
  8. {
  9. path: 'secured-page',
  10. canActivate: [ NgxSecurityGuard ],
  11. data: {
  12. security: {
  13. isAuthenticated: true,
  14. hasAllRoles: ['ADMIN', 'USER'],
  15. redirectTo: '/access-denied',
  16. unauthorizedHandler: (route: Route | ActivatedRouteSnapshot, state?: RouterStateSnapshot) => {
  17. console.warn('No, no, no, you cannot access this !');
  18. }
  19. }
  20. },
  21. component: SecuredComponent
  22. }
  23. ];

Tips

Log unauthorized access

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

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

Contributing

Feel free to introduce a feature request, an issue or a pull request. :ok_hand:

Changelog

Changelog is available here.

License

MIT