Different RoleGuard in a Child Item Angular Routing

Question

I wanted to know if you use a RoleGuard to check if someone can activate the path and you want a different RoleGuard in a child item could be possible:

I already tried but I can't acces to the path with the different RoleGuard

{
    path: 'admin',
    canActivate: [AdminGuard],
    children: [
        { path: '', redirectTo: 'test', pathMatch: 'full'},
        { path: 'test', component: MasterDataComponent},
        { path: 'test/subtest', component: ObjectsTypeComponent },
        { path: 'test/subtest/:operation', component: ObjectsTypeDetailComponent },
        { path: 'test/subtest/:operation/:id', component: ObjectsTypeDetailComponent },
        { path: 'test/money', component: DivisesComponent, canActivate: [OperatorGuard] } 
}

So, Only Admins can enter in this path, but I want to allow Operator to enter the path test/money.

Thanks in advise.

Answer 1

You're trying to use a Guard inside of a route that already has a Guard. This would be ok IF the guards were "enhancing security" (aka adding properties).

But, as soon as you want to override the guard properties, you have two options:

1. Add the guards to each route individually.
2. Add another route that will override the first one (you have to write the OperatorOrAdminGuard).

{
    path: 'admin',
    canActivate: [AdminGuard],
    children: [
            { path: '', redirectTo: 'test', pathMatch: 'full'},
            { path: 'test', component: MasterDataComponent},
            { path: 'test/subtest', component: ObjectsTypeComponent },
            { path: 'test/subtest/:operation', component: ObjectsTypeDetailComponent },
            { path: 'test/subtest/:operation/:id', component: ObjectsTypeDetailComponent },
    ],
},
{
    path: 'admin/test/money',
    component: DivisesComponent, 
    canActivate: [OperatorOrAdminGuard]
}

Instead of creating multiple guards for diferent users, you can use a GuardFactory. It's explained here: Pass parameter into route guard

Then, use it like:

{ 
   path: 'admin/test/money, 
   component: DivisesComponent,
   canActivate: RoleGuard,
   data: {roles: ['Operator', 'Admin']}
}