Angular 8.1中带缓存逻辑的路由守卫为何无法激活路由？

这个问题的核心在于Angular 8路由守卫对Observable的完成状态有明确要求：当canActivate返回一个Observable时，Angular需要这个Observable发出值后立即完成，才能确认守卫结果并推进路由流程。

你服务中缓存分支返回的this.companySubject.asObservable()是由BehaviorSubject衍生的Observable，而BehaviorSubject是一个热Observable，永远不会自动完成（除非手动调用complete()）。对比之下，HTTP请求返回的Observable是冷Observable，发出响应后会自动完成，所以移除缓存判断时功能正常。添加缓存逻辑后，守卫会一直等待Observable完成，导致路由始终处于pending状态，无法激活。

有两种简单的修复方式，核心都是让缓存分支的Observable发出值后自动完成：

方案1：在服务的缓存分支添加take(1)操作符 #

修改CompanyService的get方法，在返回BehaviorSubject的Observable时加上take(1)，确保只取第一个值后立即完成：

private company: Company;
public companySubject: BehaviorSubject<Company> = new BehaviorSubject(this.company);

get(slug: string, params: HttpParams = null): Observable<Company> {
 if (this.company && this.company.slug === slug) {
   // BehaviorSubject已持有最新值，无需重复调用next()
   return this.companySubject.asObservable().pipe(take(1));
 }
 return this.http.get<Company>(`companies/${slug}`, {params: params}).pipe(
   tap((response: Company) => {
     this.company = response;
     this.companySubject.next(this.company);
   })
 );
}

方案2：在守卫的Observable流中添加take(1) #

如果不想修改服务逻辑，可以在canActivate的pipe中加入take(1)，确保整个守卫的Observable流完成：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
 const slug = route.parent.paramMap.get('company');
 return this.companyService.get(slug).pipe(
   take(1), // 强制Observable发出值后完成
   tap((company: Company) => {
     if ( company.locations_count == 0 || !company.subscribed ) {
       this.router.navigateByUrl(`/app/company/${slug}/setup`);
     }
   }),
   map(() => true)
 );
}

你当前在tap中手动调用navigateByUrl的方式存在潜在冲突（守卫返回true的同时触发路由跳转）。更规范的做法是让守卫直接返回UrlTree，Angular会自动处理导航，同时终止当前路由流程：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
 const slug = route.parent.paramMap.get('company');
 return this.companyService.get(slug).pipe(
   take(1),
   switchMap((company: Company) => {
     if ( company.locations_count == 0 || !company.subscribed ) {
       // 返回UrlTree，Angular会自动导航到目标路由
       return of(this.router.createUrlTree([`/app/company/${slug}/setup`]));
     }
     return of(true);
   })
 );
}

这种方式既避免了手动跳转的冲突，也让守卫逻辑更清晰，完全符合Angular的设计规范。

内容的提问来源于stack exchange，提问作者Jon Donnell