防护后组件不渲染，角度 9

Question

我正在尝试使用AuthGuard 中间件保护经过身份验证的路由。当我将此中间件实现为路由时。激活守卫后，这些路线不起作用。

应用路由模块

const routes: Routes = [
  {
    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)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})

和 AuthGuardMiddleware

@Injectable({
  providedIn: 'root'
})
export class AuthGuardMiddleware implements CanActivate, CanLoad {
  constructor(private authService: AuthService, private router: Router) {
  }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> {
    return this.authService.user.pipe(map(user => {
      if (user) {
        return true;
      }
      return this.router.createUrlTree(['/login']);
    }));
  }

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.user.pipe(map(user => {
      if (user) {
        return true;
      }
      this.router.navigate(['/']);
      return false;
    }));
  }
}

我该如何解决？ 注意：AuthService::user 类型为 BehaviorSubject 初始化为 null

更新

我意识到当我清理我的应用程序组件并删除条件路由器出口时，一切都开始正常工作。我仍然不知道究竟是什么导致了这个错误。

应用组件

export class AppComponent implements OnInit {
  currentUrl: string;
  isAuthRoute = false;

  constructor(private router: Router) {
  }

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.currentUrl = event.url;
        this.isAuthRoute = ['/login', '/register']
          .indexOf(this.currentUrl) !== -1;
      }
    });
  }
}

应用组件视图

<div *ngIf="!isAuthRoute">
  <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>
</div>

<div style="height: 80vh" class="d-flex justify-content-center align-items-center" *ngIf="isAuthRoute">
  <router-outlet ></router-outlet>
</div>

Answer 1

你的 AuthService.user 返回一个 Observable 流，它永远不会完成。据我所知，canLoad 和canActivate 需要一个完整的Observable。您可以使用take(1) 运算符来实现：

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> {
    return this.authService.user.pipe(
       map(user => {
        if (user) {
          return true;
        }
        return this.router.createUrlTree(['/login']);
      }),
      take(1)
    );
  }

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.user.pipe(
      map(user => {
        if (user) {
          return true;
        }
        this.router.navigate(['/']);
        return false;
      }),
      take(1)
    );
  }

---

我猜这可能发生的另一个原因是因为您使用的是PreloadAllModules 策略。这将立即加载所有模块，但我猜这是在用户尚未登录时完成的，因此守卫将返回 false 并且模块不会加载，也不会重试。

所以你需要重新考虑是否要以这种方式使用canLoad 保护，如果你正在使用PreloadAllModules。也许canActivate 守卫就足够了。

您还可以实现自定义预加载策略，以某种方式等待用户登录以加载它

---

有了你关于条件路由器出口的附加信息，这是有道理的，因为首先组件将被放置在一个router-outlet中，但在路由完成后，另一个router-outlet变得可见，但什么都没有放在那里:)。您可以通过使用 ngTemplateOutlet 指令来更新您的模板来规避此问题：

<ng-template #outlet>
  <router-outlet ></router-outlet>
</ng-template>

<div *ngIf="!isAuthRoute">
  <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">
      <ng-component [ngTemplateOutlet]="outlet"></ng-component>
    </div>
  </div>
</div>

<div style="height: 80vh" class="d-flex justify-content-center align-items-center" *ngIf="isAuthRoute">
  <ng-component [ngTemplateOutlet]="outlet"></ng-component>
</div>

这样可以确保在AppComponent 中只放置一个router-outlet，这是应该这样做的方式

Answer 2

我看不到您在 AppRoutingModule 中使用 AuthGuard 的位置。

尝试将其应用于任何路线，例如：

{
    path: 'posts',
    canLoad: [AuthGuard],
    loadChildren: () => import('./modules/posts/posts.module').then(m => m.PostsModule),
},