tryin to apply a guard to parent but not on child-CodePudding

I'm trying to apply a Guard to access my list path, but the login to activate the route is a child of it, is it possible to use the guard to prevent from accessing the parent but not the children ?

const routes: Routes = [
  {path: "", component: TirageComponent},
  {path: "tirage", redirectTo: ""},
  {path: "historique", component: HistoriqueComponent},
  {path: "liste", component: ListeComponent, canActivate: [AuthGuard] ,children: [
    {path: "login", component: AuthComponent}
  ]},
  {path: "**", redirectTo: "tirage"}, 
];

This is my routing code, whenever I try to access /liste/login, it wont let me access it, so I can't access the login and the page that should be accessible after the login

CodePudding user response：

The easiest solution would be to move the child out of its parent :

const routes: Routes = [
  {path: "", component: TirageComponent},
  {path: "tirage", redirectTo: ""},
  {path: "historique", component: HistoriqueComponent},
  {path: "liste", component: ListeComponent, canActivate: [AuthGuard]},
  {path: "liste/login", component: AuthComponent}
  {path: "**", redirectTo: "tirage"}, 
];

CodePudding user response：

If I am not mistaking the only way to access the child route is through the parent route. If you were to disable the parent route you would not be able to access the child.

As I see it you have two options:

switch the liste and login route and use the guard on the new child route. This way you can always access the login screen put you protect the liste. This will kinda messup your routes tho. You'll get something like domain.com/login/liste but obviously you can change the naming a bit.

You could also split the routes completely this will give you two separate routes. The login one you can keep accessible all the time and the liste one you can protect with a route guard. This is the option I would suggest.

  const routes: Routes = [
    {path: "", component: TirageComponent},
    {path: "tirage", redirectTo: ""},
    {path: "historique", component: HistoriqueComponent},
    {path: "liste", component: ListeComponent, canActivate:[AuthGuard]},
    {path: "login", component: AuthComponent}
    {path: "**", redirectTo: "tirage"}, 
  ];

Hope this insight help!