How to implement ACL / role based authorization with angular 2?

[Felix Costa]

What is the best way to implement ACL / paper-based with angular 2?

My scenario, in a nutshell, is this: The roles are dynamic and are based on the permissions that the client can configure that can also be dynamic.

I need to prevent the user from having access to a particular resource that he is not authorized to do. For this I thought of using the concept of Guards of the Angular. With CanActivate Guard I could set whether to let the user pass or not, based on information I would put in each route. This information would be the name of the resource to which that route refers. When I got to the guard I could compare with his role and see if his role has access to this feature and whether or not to allow navigation.

But with that in could fall into two more problems:

1 - How to redirect the user to a resource that he has access to? Would I have to list the route files and look for someone who is compatible with his role and then redirect there?

2 - How to disable components that it can not see on pages that it can access? For example, it has access to the listing page X but it does not have access to create a new item, so I need to remove the Create Something button. Or rather, how to do this with divs elements that contains specific information for some roles but not for the role of it?

I would like to know how best to approach this scenario within the angular ecosystem.

Thanks for listening.

[Sander Elias]

Hi Felix,

When it comes to ACL and auth, this is usually very tightly bound to the project you need it in. I yet have to discover a generic solution for this. (a workable one that is.) 

I usually build a couple of services that use bitmasks to determine when a user holds the right access permission.  When routeing to a service, I prevent changing to that route (and display a 'no access' msg).

If I need to change inside the view itself, I use another service, combined with an attribute directive, that can check the permissions, and do something like this in the view:

<button ... has-access="user_may_add_somehting">...

the hasAccess directive checks the identifier and the user to  grant or deny access and shows/hide (or even remove) the element. 
I also add something like this to the css of the project, to prevent items from briefly flashing into view:

[has-access] {
   display:none !importand
}

Hope this helps you a bit,

Regards

Sander

[Leonardo Vidal]

Hey, Sander:

I'm actually investigating about control-access patterns to apply a light control-layer to my angular-app. As the Felix's needs, I want to know how to manage component (enable/remove) based on the granted user permission. I found that for an "elastic environment" there's is a pattern called ABAC (attribute-based access control) which declares that access-control can be achieved by the usage of policies that handle a combination of  subjects(user-role) , attributes and environment given. I feel your implementation with the attribute-directive could fit into it. 

[Sander Elias]

Hi Leonardo,

It should work pretty seamless, I prefer bitmaps because they allow me to very densely pack a load of boolean values. But an attribute approach is using exactly the same semantics. You can draw a pattern for ACL pretty easy, An actual implementation is tightly bound to your stack, and setup. And then there is the new stuff, like the credentials api, and even the whole passwordless thing. Those have a large impact on how you can do this.

Regards

Sander

[Zlatko Đurić]

On Monday, November 28, 2016 at 4:51:35 AM UTC+1, Sander Elias wrote:

I also add something like this to the css of the project, to prevent items from briefly flashing into view:

[has-access] {
   display:none !importand
}

Well this is a cool trick that I haven't thought of :) Thanks for the great tip, Sander. 

[Samuel Hailai]

So it seems you need to have roles beforehand, which means you need to make api call to grape the roles. Is that best practice?

[Sander Elias]

Hi Samual,

I'm really interested in alternatives. This is constantly evolving! How are you going to define security without predefined roles?

Regards

Sander

[Dan Patil]

You might find this blog helpful http://coding-karma.com/2018/06/17/role-based-access-control-in-angular-4-route-guards-in-depth/