How to add different permissions to parent and child component?

Question

In my angular application routing is implemented as in following example.

User must have Permission1 permission to open parent component page, and Permission1 and Permission2 to view child component. How can I open SecondComponent in view mode without having parent component permission? If that is not possible how can I make new route for viewing SecondComponent without having Permission1?

  {
    path: ':userId', component: MainComponent,
    data: {
      permissions: [Permission1] },
      canActivate: [AuthGuard],
    children: [
      { path: '', component: FirstComponent,
        data: { reuseRoute: true} },
      { path: 'second', component: SecondComponent,
        data: {
          actionType: ActionType.Edit,
          permissions: [Permission2] },
        canActivate: [AuthGuard] },
      { path: 'second-view/:id', component: SecondComponent,
        data: {
          actionType: ActionType.View,
          permissions: [Permission2] },
        canActivate: [AuthGuard, OverviewGuard] }}]```

score 0 · Answer 1 · answered Sep 28 '21 at 16:46

Why don't you create multiple auth guard and use them in routing.

Please find the below given reference.

https://www.collegestash.com/using-multiple-guards-route-angular-4/

OR

Multiple canActivate guards all run when first fails

I hope, it answers your question. :)

How to add different permissions to parent and child component?

1 Answers1