Angular canActivate execute ahead of time

Question

I have setup my routes and route guards in Angular and they are working great for stopping the user from accessing a route that they shouldn't. However, I have a global navigation section on all my pages and it basically loops over my array of Routes and displays all of the links (using *ngFor). I would like to have each Route evaluated when I'm looping over them to see if the use canActivate that route. This way I am not showing the user a link for something they cannot visit. I'd like to do this in a way that that the same route guard logic is reused.

I have an array of routes like so:

const routes: Routes = [
   { 
      path: 'dashboard-simple', 
      component: DashboardSimpleComponent,
      canActivate: RoleGuard,
      data: {roles: ['Basic']}
   },
   { 
      path: 'dashboard-advanced', 
      component: DashboardAdvancedComponent,
      canActivate: RoleGuard,
      data: {roles: ['Admin']}
   },
   // And so on...
];

The template looks like this:

<ul>
    <li *ngFor="let route of routes"><a [routerLink]="route.path">{{ route.path }}</a></li>
</ul>

how flexible does this need to be? is it always the RoleGuard and depending on data.roles? or is there more to it than that? if it's the simple case, I'd just write a RoleGuardDirective of some kind and feed the roles to it in the loop — bryan60

Thangappan G Thangappan G · Accepted Answer · 2021-03-22T21:46:04

if the roleguard is declared in global module it will execute once it was declared beacause of constructor, make the guard available in your current module, hope it will work

Angular canActivate execute ahead of time

2 Answers