Question

我使用Angular Guard保护我的路由，我在主路由中添加了 canActivate attr，它可以正常工作，而对于子单个路由（ReportsRouteModule / RequestsRouteModule ...），如果我想启用警卫队，我还需要在每个路线中设置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

将所有路由都放置在父路由内，并且只能在父路由中使用can

示例代码

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

Answer 2

一些关于路由器内部的信息，可以帮助您理解为什么将canACtivateGuards添加到每个子模块的根路由中并不是一个坏习惯。

当您使用Router的{{1}}和forRoot时，它将子模块forChild合并到父模块routes数组。因此，这些路由成为兄弟路由。这意味着，您必须为每个子模块的顶部路由添加routes保护。

如果您不想这样做，则必须在应用程序路由中将所有其他子路由作为子路由提到一个父路由，如下面的答案所述（这可能不是您要查找的内容））。

Answer 3

根据建议，我在子路径中添加了canActivate，它工作正常。

如何为Angular中的所有路由（主路由和所有子路由）应用canActivate Guard

3 个答案: