Making Role based view possible using Directives in Angular

Angular provides Activate Gaurds to prevent unauthorised access into a route. Similarly, you can use directives if you want a user to access only certain aspects of a component.

Consider a scenario where a user John has the below levels of CRUD access for 2 resources ABC and PQR in the component.

permissions={
“userID”:”John”,
“entitled”:[{
“resource”:”ABC”,
“create”:false,
“read”:true,
“delete”:false,
“edit”:true
},
{
“resource”:”PQR”,
“create”:true,
“read”:true,
“delete”:false,
“edit”:true
}]
}

Below is the Directive that does the job of role discrimination.

export class RoleDiscrDirective {constructor(private element:ElementRef) { }
@Input() action:string;
@Input() resource:string;
permissions={
“userID”:”John”,
“entitled”:[{
“resource”:”ABC”,
“create”:false,
“read”:true,
“delete”:false,
“edit”:true
},
{
“resource”:”PQR”,
“create”:true,
“read”:true,
“delete”:false,
“edit”:true
}
]
}
ngOnInit(){
this.permissions.entitled.filter(res=>{
if(res.resource=== this.resource){
res[this.action] ? this.element.nativeElement.style.display=”block”:
this.element.nativeElement.style.display=”none”
}
})
}}

We have hardcoded the permissions object now. But in a real application, you need to make a call from the Directive to the service to obtain this detail from the server.

The directive accepts 2 Input variables: action and resource from the component template. The resource variable,as the name suggests identifies the resource in the component and action variable describes the CRUD action to be performed in the resource.

We are filtering through the entitled array property of the permissions object and checking if the resource variable(Input) matches the resource property of any element of the entitled array.

If there is a match, we check whether the action variable(Input) value is true or false for resource in the array element. If true, we are accessing the HTML Element via ElementRef and setting its display style property to “block”, else “none”.

Template:

<h3>Resource ABC</h3>
<div class=”box”>
<button class=”btn btn-primary” appRoleDiscr resource=”ABC” action=”create”>Create Something</button><button class=”btn btn-primary” appRoleDiscr resource=”ABC” action=”read”>View Something</button><button class=”btn btn-primary” appRoleDiscr resource=”ABC” action=”edit”>Edit Something</button><button class=”btn btn-primary” appRoleDiscr resource=”ABC” action=”delete”>Delete Something</button>
</div>
<h3>Resource PQR</h3>
<div class=”box”>
<button class=”btn btn-primary” appRoleDiscr resource=”PQR” action=”create”>Create Something</button><button class=”btn btn-primary” appRoleDiscr resource=”PQR” action=”read”>View Something</button><button class=”btn btn-primary” appRoleDiscr resource=”PQR” action=”edit”>Edit Something</button><button class=”btn btn-primary” appRoleDiscr resource=”PQR” action=”delete”>Delete Something</button>
</div>

appRoleDiscr is the Directive selector.

Template

As you can see, for Resource ABC, only the View and Edit buttons are visible and for Resource PQR, the Delete button is not visible.

An Angular Developer who loves finding answers to all the mysteries of this universe