I am facing a minor issue - I need to implement roles validation in my Angular application. The structure of the application consists of pages, each containing multiple components. User privileges are assigned at the component level, making it necessary to use *ngIf for validation on each individual component:
<results-component
*ngIf="auth.hasPermission('driver_productivity')"
[format] = "driver_productivityFormat"
[IsFullWidth] = "IsFullWidth"
(customEvent)="showPrint($event)">
</results-component>
auth.service.ts:
hasPermission(permissionName){
if (!this.tokenPayload){
this.getToken().subscribe(t=>{this.tokenPayload=decode(t.getValue())});
if (this.tokenPayload.roles && this.tokenPayload.roles.length>0 ){
this.permissions={};
for (let i=0;i<this.tokenPayload.roles.length;i++){
this.permissions[this.tokenPayload.roles[i]]=true
}
}
}
return this.permissions[permissionName]
}
However, applying this validation for multiple components on a page has led to excessive processing time and is proving to be an inefficient solution.
[Violation] 'setInterval' handler took 150ms zone.js:1755 [Violation] 'click' handler took 318ms zone.js:2279 [Violation] 'requestAnimationFrame' handler took 84ms zone.js:1755 [Violation] 'click' handler took 261ms
Is there a way to optimize the *ngIf directive to run only once when the component is initially loaded?