Angular ACL

Ng2 ACL (Access Control List) is a service that allows you to protect/show content based on the current user’s assigned role(s), and those role(s) permissions (abilities). So, if the current user has a “moderator” role, and a moderator can “ban_users”, then the current user can “ban_users”.

Install

Install with npm:

npm install ng2-acl

GitHub

daoudaDiallo/ng2-acl

Basic Example

Set Data

Setup the AclService in your app component's.

//app.component.ts

import { AclService } from 'ng2-acl/dist';

/*
 * App Component
 * Top Level Component
 */
@Component({
  selector: 'app'
})
export class App {

  aclData = {};

  constructor(private aclService: AclService) {}

  ngOnInit() {
      // Set the ACL data. Normally, you'd fetch this from an API or something.
      // The data should have the roles as the property names,
      // with arrays listing their permissions as their value.
      this.aclData = {
          guest: ['login'],
          member: ['logout', 'view_content'],
          admin: ['logout', 'view_content', 'manage_content']
      }
      this.aclService.setAbilities(aclData);
          
      // Attach the member role to the current user
      this.aclService.attachRole('member');
  }

}

Protect a route

If the current user tries to go to the /manage route, they will be redirected because the current user is a member, and manage_content is not one of a member role's abilities.

However, when the user goes to /content , route will work as normal, since the user has permission. If the user was not a member , but a guest, then they would not be able to see the content route either, based on the data we set above.

//demo/demo.routing.ts
import { Routes } from '@angular/router';
import { DemoComponent } from './demo.component';
import { AclDemoResolver } from './demo.resolve';

// noinspection TypeScriptValidateTypes
const routes: Routes = [
  {
    path: '',
    component: DemoComponent,
    resolve: { route: AclDemoResolver, state: AclDemoResolver },
  },
];

//demo/demo.resolve.ts
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { AclService } from 'ng2-acl';
import { AclRedirection } from './app.redirection';

@Injectable()
export class AclDemoResolver implements Resolve<any> {
  constructor(
    private aclService: AclService, private router: Router, private aclRedirection: AclRedirection,
  ) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    if (this.aclService.can('manage_content')) {
      // Has proper permissions
      return Observable.of(true);
    } else {
      // Does not have permission
      this.aclRedirection.redirectTo('Unauthorized');
    }
  }
}

//app.redirection.ts
//aclRedirection Service
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AclRedirection {
  constructor(
       private router: Router,
  ) {}

  redirectTo(type: string) {
    if (type === 'Unauthorized') {
      this.router.navigate(['/']);
    }
  }
  
}

//app.module.ts
import { AclService } from 'ng2-acl';
import { AclDemoResolver } from './demo/demo.resolve';
import { App } from './app.component';
import { AclRedirection } from './app.redirection';
......
@NgModule({
  bootstrap: [App],
  declarations: [
    App,
  ],
  ......
  imports: [
  ......
  ],
  providers: [
    AclService,
    AclRedirection,
    AclDemoResolver,
  ],
  .....
})

export class AppModule {
}