Angular 9中AuthGuard生效后受保护路由组件无法渲染的解决

你的问题出在AppComponent模板中存在两个无命名的<router-outlet>，并且通过*ngIf动态切换显示。当AuthGuard检测到用户未登录、触发导航到/login时，isAuthRoute变为true，此时第一个router-outlet被销毁、第二个被创建。

Angular的路由系统依赖于稳定的路由出口来完成组件渲染和懒加载模块的加载流程，这种动态创建/销毁router-outlet的操作会中断路由的正常处理——尤其是canLoad守卫在加载懒加载模块时，router-outlet的状态变化会导致模块无法正确挂载，最终让受保护路由失效。

另外，你在canLoad中手动调用router.navigate(['/'])的方式也不够规范，Angular推荐守卫直接返回UrlTree来触发导航，这样能更好地整合到路由的原生流程中。

1. 合并路由出口，只保留一个无命名<router-outlet> #

通过条件渲染控制布局容器而非路由出口本身，确保路由系统始终有一个稳定的出口来渲染组件。修改AppComponent模板如下：

<!-- 根据路由类型切换布局容器 -->
<div *ngIf="isAuthRoute; else mainLayout">
  <div style="height: 80vh" class="d-flex justify-content-center align-items-center">
    <router-outlet></router-outlet>
  </div>
</div>

<ng-template #mainLayout>
  <div class="row page-wrapper">
    <div class="col-md-3 col-md-pull-9">
      <app-sidebar></app-sidebar>
    </div>
    <div class="col-md-9 col-md-push-3 content-area">
      <router-outlet></router-outlet>
    </div>
  </div>
</ng-template>

这样同一时间只会存在一个router-outlet，既保留了不同路由的布局差异，又不会干扰路由系统的正常工作。

2. 优化AuthGuard的canLoad方法 #

将手动导航改为返回UrlTree，并统一跳转到登录页（和canActivate逻辑保持一致）：

canLoad(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> {
  return this.authService.user.pipe(
    map(user => {
      if (user) {
        return true;
      }
      // 返回UrlTree触发导航，而非手动调用navigate
      return this.router.createUrlTree(['/login']);
    })
  );
}

3. 验证基础路由配置 #

确保/login和/register没有被AuthGuard保护，路由模块配置示例：

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { 
    path: 'posts', 
    canLoad: [AuthGuardMiddleware], 
    loadChildren: () => import('./modules/posts/posts.module').then(m => m.PostsModule) 
  },
  { 
    path: 'users', 
    canLoad: [AuthGuardMiddleware], 
    loadChildren: () => import('./modules/users/users.module').then(m => m.UsersModule) 
  },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: '**', redirectTo: '/login' }
];

当你移除了条件渲染的router-outlet后，AppComponent中只剩下一个稳定的路由出口，Angular的路由系统可以正常完成组件渲染、懒加载模块加载等流程，守卫的导航逻辑也能顺畅执行，所以受保护路由恢复了正常功能。

内容的提问来源于stack exchange，提问作者Hasan Teoman Tıngır