Как применить canActivate guard для всех маршрутов (основного маршрута и всех под маршрутов) в Angular

Question

Я использую Angular Guard для защиты своих маршрутов, добавляю canActivate attr в основной маршрут, и он отлично работает, в то время как для вспомогательных маршрутов (ReportsRouteModule / RequestsRouteModule ...), если я хочу включить guardМне также нужно установить canActivate на каждом маршруте, я думаю, что это плохой способ использовать угловую защиту и тратить много времени. Так есть ли способ избежать этого и управлять им в главном маршруте.

Пожалуйста, посмотрите структуру моего приложения и некоторый код, как показано ниже: 1. Структура приложения:

 |-- app.module.ts
 |-- app-routing.module.ts(master route)
 |-- app.component.ts
 |-- report
    |-- report-route.module.ts(sub route)
    |-- report-aa
    |-- report-bb
    |-- report-cc
 |-- request
    |-- request-route.module.ts(sub route)
    |-- request-aa
    |-- request-bb
    |-- request-cc
 |-- etc.

код: основной маршрут

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  // providers: [AuthGuard]
})
export class AppRoutingModule {

суб-маршрут:

const routes: Routes = [
  {
    path: 'reports',
    canActivateChild: [AuthGuard],
    children: [
      {path: '', redirectTo: 'reports', pathMatch: 'full'},
      {path: 'A', component: AReportsComponent},
      {path: 'B', component: BReportsComponent},
      {path: 'C', component: CReportsComponent},
    ]
  }

];
@NgModule({
  imports: [
    RouterModule.forChild(routes),
  ],
  declarations: [
    AReportsComponent,
    BReportsComponent,
    CReportsComponent,
   ]
})
export class ReportsRouteModule {

}

Answer 1

Некоторая информация о внутренних компонентах маршрутизатора, которая поможет вам понять, почему добавление canACtivateGuards к каждому корневому маршруту субмодуля не является плохой практикой.

При использовании Router forRoot и forChild, он объединяет подмодули routes с массивом родительского модуля routes. Таким образом, эти маршруты становятся родственными маршрутами . Это означает, что вы должны добавить canActivate guard к каждому из верхних маршрутов субмодуля.

Если вы не хотите этого делать, вы должны упомянуть все остальные суб-маршруты как дочерние для одногородительский маршрут в app-routing, как упомянуто в ответе ниже (который, вероятно, может не соответствовать тому, что вы ищете).

Answer 2

Как рекомендовано, я добавляю canActivate в дочерние маршруты, и он отлично работает.

Answer 3

Поместите все маршруты в родительский маршрут и используйте активную банку только в родительском маршруте

Пример кода

{
    path: '', canActivate: [ParentAuthGaurdService], children: [
      { path: "admin-dashboard", component: AdminDashboardComponent },
      { path: "admin/user", component: UserCrudComponent },
      { path: "admin/product", component: ProductCrudComponent }
    ]
  }