I have permission DTO coming from BE which determines parts of application accessible to the user. Using NgRx selector I want to use it inside the CanLoad guard but I can't get it to work.
routes.ts
{
path: 'acquisition',
canLoad: [AcquisitionGuard],
loadChildren: () => import('./acquisition/acquisition.module').then(m => m.AcquisitionModule),
pathMatch: 'full',
},
The guard:
canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
console.log('canLoad guard'); //never fires
return this.store.select(fromPermission.canAcess);
}
For some reason this guard never fires (tried with console.log
and debugger
). When I change it to canActive
and do it in the 'parent' routes file it doesn't fire either. The only time it fires is when I change it to canActive
and move it to 'child' routes.file
acquisition.routes.ts
{
path: 'acquisition',
canActive: [AcquisitionGuard], //This is the only time I'll get some response from the guard
component: AcquisitionComponent,
children: [...],
},
EDIT: It looks like this is caused by the fact, that once the module is loaded 'CanLoad' guard is not fired again. Is it possible that Electron loads everything at once and thus this guard can't be called?
You can define the acquisition routes as children in the module and add canActivateChild
that will handle the guarding for all the of the routes for this module.
// acquisition.module.ts
const acquisitionRoutes: Routes = [
{
path: '',
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
children: [
...
]
},
];
// app.routing.ts
{
path: 'acquisition',
loadChildren: () => import('./acquisition/acquisition.module').then(m => m.AcquisitionModule),
pathMatch: 'full',
};
Check out this answer: Lazy load module with Router Guard with dynamic routes in Angular4