Angular中如何仅对Shell子路由的module3应用CanActivateChild守卫

Hey there! Let's fix this so your AuthenticationGuard only protects module3, while leaving module1 and module2 unguarded—all while keeping your ShellComponent (with the navigation bar) intact for all routes.

The Problem with Your Current Setup #

Right now, you're wrapping all three modules in a single Shell.childRoutes call, which applies canActivateChild: [AuthenticationGuard] to every child route under that parent. We need to split this up so only module3 falls under the guarded route.

Solution 1: Split Your Route Config Directly #

You can create two separate parent routes using ShellComponent—one without guards for module1/module2, and one with the guard for module3. Here's how to update app-routing.module.ts:

const routes: Routes = [
  // Unprotected routes (module1 & module2) using ShellComponent
  {
    path: '',
    component: ShellComponent,
    children: [
      { path: 'module1', loadChildren: () => import('./module1/module1.module').then(m => m.module1) },
      { path: 'module2', loadChildren: () => import('./module2/module2.module').then(m => m.module2) },
    ]
  },
  // Protected route (module3) with AuthenticationGuard
  {
    path: '',
    component: ShellComponent,
    children: [
      { path: 'module3', loadChildren: () => import('./module3/module3.module').then(m => m.module3) },
    ],
    canActivateChild: [AuthenticationGuard]
  }
];

This works because both parent routes use ShellComponent, so your navigation bar will appear for all routes—but only module3 will trigger the guard checks.

Solution 2: Make Your Shell Class More Flexible #

If you want to keep using the Shell.childRoutes helper (which is a nice pattern!), you can modify it to accept an optional guard parameter. Update Shell.ts first:

export class Shell {
  static childRoutes(routes: Routes, guards?: any[]): Route {
    const baseRoute: Route = {
      path: '',
      component: ShellComponent,
      children: routes,
    };

    // Add guards only if they're provided
    if (guards) {
      baseRoute.canActivateChild = guards;
    }

    return baseRoute;
  }
}

Then update app-routing.module.ts to use this enhanced helper:

const routes: Routes = [
  // Unprotected modules (no guards passed)
  Shell.childRoutes([
    { path: 'module1', loadChildren: () => import('./module1/module1.module').then(m => m.module1) },
    { path: 'module2', loadChildren: () => import('./module2/module2.module').then(m => m.module2) },
  ]),
  // Protected module3 (pass the guard array)
  Shell.childRoutes([
    { path: 'module3', loadChildren: () => import('./module3/module3.module').then(m => m.module3) },
  ], [AuthenticationGuard]),
];

This approach keeps your code DRY and makes it easy to add guards to other modules later if needed.

Quick Check #

Make sure your AuthenticationGuard's canActivateChild method is properly implemented to return true or false based on authentication state. For example:

@Injectable({ providedIn: 'root' })
export class AuthenticationGuard implements CanActivateChild {
  constructor(private authService: AuthService) {}

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // Replace with your actual auth check logic
    return this.authService.isLoggedIn();
  }
}

Either solution will get you exactly what you need—only module3 will be protected by the guard, while all modules still use your shared ShellComponent with the navigation bar.

内容的提问来源于stack exchange，提问作者D AT D