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

Question

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

Пожалуйста, ознакомьтесь со структурой моего приложения и некоторым кодом, как показано ниже: 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.

2. код: главный маршрут

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

Вы можете разместить маршруты внутри родительского маршрута и использовать canActiveтолько на родительском маршруте. Таким образом, сторож будет соответствовать всем дочерним маршрутам.

Образец кода

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

Answer 2

По совету я добавляю canActivate в дочерних маршрутах, и он отлично работает.

Answer 3

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

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

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