Angular routing same path different guard

Question

I want to use the same path ticket because I want to redirect when save something (Use same component to Update Ticket ). But there is a problem with canActivate. What is the best way to fix it?

const router: Routes = [
  {
    path: '',
    component: HomeLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'ticket',
        canActivate: [SupportGuard],
        component: TicketComponent
      },
      {
        path: 'ticket',
        canActivate: [CustomerGuard],
        component: SiteTicketComponent
      },
      ....
    ]
  },
  {
    path: '',
    component: LoginLayoutComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'signup',
        component: SignupComponent
      },
    ]
  },
  {
    path: '**',
    component: Error404Component
  }
]

Thanks in advance.

@Eliseo Why is ```path : ' ' ``` can use differents components with ```canActivate: [AuthGuard] ``` — Puthxii, Jan 17 '21 at 20:45
Really yours component 'login' y 'signup' might not be children of nothing. Angular, when get a path, check from up to down the "routes" the first find, show the component. In your routes you can access to /, /ticket, /login and /signup. About your question, I don't know about yours guards. I suppose you can make an unique guard, that store (in a service, p.e.) is someone has access to "Ticket" or to "SiteTicket". A component that show -using *ngIf- one or another component can serve — Eliseo, Jan 17 '21 at 21:05

score 0 · Answer 1 · edited Oct 05 '21 at 10:22

I had a similar issue.

The solution would be to introduce a parent component BaseComponent for the two routes, and inside this component perform a router.navigate meaning:

const router: Routes = [
   {
    path: '',
    component: BaseComponent,
    children: [
      {
       path: '',
       component: HomeLayoutComponent,
       canActivate: [AuthGuard],
       children: [
      ...
       ]
     },
     {
       path: '',
       component: LoginLayoutComponent,
       children: [
      ...
       ]
     },
    ...
   ]}

And inside the BaseComponent:

ngOnInit(): void {
    if (theCondition) {
      this.router.navigate(['./one-path'], { relativeTo: this.route });
    } else {
      this.router.navigate(['./other-path'], { relativeTo: this.route });
    }
}

Angular routing same path different guard

1 Answers1

Linked