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
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 {
}