I have encountered a recurring issue with implementing Guards on my pages.
Despite referencing multiple solutions from StackOverflow, none of them seem to work for me. Take this example for instance.
This is my first attempt at restricting access to certain pages using Guards, specifically child pages within my Truck module:
Truck
|_ truck-list
|_ truck-search
|_ truck-menu
|_ truck-details
In my route file for the Truck module, I have specified Paths and corresponding components as follows:
RouterModule.forChild([
{path: 'list', component: TruckListComponent, canActivate: [TruckGuard]},
{path: 'search', component: TruckSearchComponent, canActivate: [TruckGuard]},
{path: 'details/:id', component: TruckDetailsComponent},
{path: 'menu', component: TruckMenuListComponent},
{path: 'menu/:id', component: TruckMenuListComponent},
{path: 'menu/add/:id', component: TruckMenuAddComponent},
])
I have also defined routes in my app-routing module covering various components including the Truck module itself:
const appRoutes: Routes = [
// List of paths...
];
...
To manage these routes for the Truck module, I created a Truck.guard.ts file which includes methods for CanActivate and CanActivateChild:
export class TruckGuard implements CanActivate, CanActivateChild {
// Guard implementation...
}
Currently, only the path truck/list seems to be functioning correctly, redirecting to the forbidden page when required. However, all other paths fail to do so.
I am puzzled by this inconsistency despite employing both canActivate and canActivateChild functions. Any insights or assistance would be greatly appreciated.