Applying client side permissions in Angular 2

Question

I'm creating a simple Angular 2 app in which I'm required to apply client-side permissions (needless to say permissions have also been applied on the server side, but hiding components which the user shouldn't see is necessary.)

I'm not yet familiar with everything Angular has to offer, so I'd love to know what way would be acceptable in order to achieve such functionality.

Or if possible, I'd love to receive some comments about the approach I've taken below:

Once the user logs in, he receives a list of permissions that he has, for example:

• READ_POSTS
• EDIT_POSTS
• READ_USERS
• EDIT_USERS

These for example, will determine if the user should see edit buttons around the app.

Then I created a directive (basically a replica of *ngIf ) that checks if the user has permissions against the UserService which holds the list of permissions the user has.

This is basically what the directive does:

if (hasPermissions) {
  this.viewContainer.createEmbeddedView(this.templateRef);
}
else {
  this.viewContainer.clear();
}

And it's used as follows:

<div id="someContainer">
  <a *myPermissionDirective="'EDIT_POSTS'">Edit Post</a>
</div>

My main problem with this approach is that it seems to get ugly with generic components that contain some elements that should be displayed and some that shouldn't .

For example, imagine a component called listComponent which we use to display lists, and we'd use it to display a list of users with the ability to edit them, according to the permissions you have: (currently, you can't edit other admin users)

• User 1 edit->
• Admin 1 [shouldn't display edit]
• User 2 edit->
• User 3 edit->

In a non generic list component, for example UserListComponent maybe we could refer to user specific permissions, but since we're using a generic ones, how would we know which of these is relevant?: EDIT_POSTS, EDIT_USERS, EDIT_ADMIN_USERS, EDIT_ARTICLE, EDIT_SYSTEM_SETTINGS etc'

Thanks in advance.

Answer 1

There is concept called guard in angular 2. May be you can use "can activate Guard".

Angular 2 roles and permissions

Answer 2

For manage permissions and access control for your angular2 applications, you can use ng2-permission module.

app.module.ts

import { Ng2Permission } from 'angular2-permission';

@NgModule({
  imports: [
    Ng2Permission
  ]
})

login.component.ts

import { PermissionService } from 'angular2-permission';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    //...

    constructor(private _permissionService: PermissionService) { }

    login() {
        this._permissionService.clearStore();
        this._permissionService.define(['READ_POSTS', 'EDIT_POSTS', 'READ_USERS', 'EDIT_USERS']);
    }
}

*.html

<div id="someContainer">
  <a [hasPermission]="['EDIT_POSTS']">Edit Post</a>
</div>

Edit Post link will displayed, if EDIT_POSTS already defined or add in permission store.

You can also use PermissionGuard from Ng2Permission module, protecting routes.

Answer 3

您还可以使用使用相同方法的ngx-permissions库，如果您来自角度1，它看起来有点不寻常，但它是从DOM中删除对象而不是用css隐藏它的唯一方法。