我知道这个问题经常在 StackOverflow 上被处理。

我咨询了 Stack 上的几个帖子，但建议的解决方案对我不起作用。

例如this one

我第一次尝试使用 Guards 限制对页面的访问，但它不适用于子页面。

我有一个卡车模块包含这样的孩子：

Truck
  |_ truck-list
  |_ truck-search
  |_ truck-menu
  |_ truck-details

我有一个卡车模块的路线文件：

RouterModule.forChild([
    {path: 'list', component: TruckListComponent, canActivate: [TruckGuard]},
    {path: 'search', component: TruckSearchComponent, canActivate: [TruckGuard]},
    {path: 'details/:id', component: TruckDetailsComponent},
    {path: 'menu', component: TruckMenuListComponent},
    {path: 'menu/:id', component: TruckMenuListComponent},
    {path: 'menu/add/:id', component: TruckMenuAddComponent},
    ])

和一个应用程序路由模块：

const appRoutes: Routes = [
    { path: '', component: HomeComponent},
    { path: 'app-forbidden', component: ForbiddenComponent},
    { path: 'Home', component: HomeComponent},
    { path: 'About', component: AboutComponent},
    { path: 'forbidden', component: ForbiddenComponent},
    { path: 'Login', component: LoginComponent},
    { path: 'Logout', component: LoginComponent},
    { path: 'confirmation-commande/:message', component: ConfirmationCommandeComponent},
    { path: 'orders', component: OrderListComponent},
    { path: 'truck/search', component: TruckSearchComponent},
    { path: 'SignUp/customer', component: UseraccountCreateCustomerComponent},
    { path: 'SignUp/truck', component: UseraccountCreateTruckComponent},
    { path: 'useraccount', loadChildren: () => import('./useraccount/useraccount.module').then(u => u.UserAccountModule)},
    { path: 'truck', loadChildren: () => import('./truck/truck.module').then(t => t.TruckModule)},
    {path: 'location', component: TruckLocationComponent},
    { path: '500', component: InternalServerComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
  ];
...

我还创建了一个 Truck.guard.ts 文件来管理卡车模块的路线：

export class TruckGuard implements CanActivate, CanActivateChild {
  constructor(private authService: AuthService, private route: Router) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url = window.location.pathname;
    if((url == '/truck') && this.authService.isCustomer()){
      return true;
    }
    else{
      this.route.navigate(['app-forbidden']);
      return false;
    }
  }
 
  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url = window.location.pathname;
    if((url == '/truck/list') && this.authService.isCustomer()){
      return true;
    }
    else if((url == '/truck/search') && this.authService.isCustomer()){
      return true;
    }
    else if((url == '/Login') && this.authService.isCustomer()){
      return true;
    }
    else{
      this.route.navigate(['app-forbidden']);
      return false;
    }
  }
}

唯一有效的路径是truck/list。他被重定向到 forbbiden 页面。

所有其他人都不起作用。

我不明白为什么。我如何使用 canActivate 和 canActivateChild。

提前感谢你的帮助。