Angular 4守卫中如何在首个Observable完成后调用第二个并返回值

嘿，我一眼就发现问题所在了——你在处理Observable嵌套时用错了RxJS操作符，导致authService.grants()的调用根本没被订阅执行，而且返回的流结构也不符合Angular守卫的要求。让我帮你拆解并修复这个问题：

核心问题分析 #

你的代码里用了map操作符处理login()的结果，但当内部返回另一个Observable（也就是grants()的调用）时，map会直接把这个Observable作为值返回，最终得到嵌套的Observable（Observable<Observable<boolean>>）。而Angular的canActivate守卫期望的是一个能直接解析为布尔值的Observable（Observable<boolean>），所以内部的grants()流根本没被订阅，自然不会执行。

另外，代码还存在两个逻辑漏洞：

• 当this.authService.isAuth为false时，没有任何返回值，守卫无法判断该允许还是拒绝访问
• 当grants.canRead为false时，同样没有返回值，会导致守卫收到undefined，无法正确处理

修复后的代码 #

我用RxJS的switchMap（用来扁平化嵌套Observable）和pipe（Angular 6+推荐的操作符组合方式）重构了代码，同时补全了所有分支的返回逻辑：

import { of } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

// ...

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
  return this.checkLogin(route); 
} 

checkLogin(route) { 
  // 使用switchMap替代map，自动订阅并扁平化内部的Observable
  return this.authService.login().pipe(
    switchMap(response => { 
      if (this.authService.isAuth) { 
        // 处理权限检查，确保所有分支都返回布尔值
        return this.authService.grants().pipe(
          map(grants => { 
            // 用!!强制转换为布尔值，避免返回undefined
            return !!grants.canRead; 
          })
        ); 
      } else {
        // 未认证时明确返回false，也可以在这里添加跳转登录页的逻辑
        return of(false);
      }
    })
  ); 
}

关键修复点说明 #

1. 用switchMap替代外层map：switchMap会订阅内部的grants() Observable，并将它的输出作为当前流的输出，直接得到Observable<boolean>，符合守卫的要求。
2. 补全未认证分支：当isAuth为false时，用of(false)返回一个布尔值的Observable，告诉守卫拒绝访问。你也可以在这里添加this.router.navigate(['/login'])来跳转到登录页。
3. 确保权限检查的返回值：用!!grants.canRead把可能的真值/假值统一转换为布尔值，避免因为grants.canRead不存在或为假时返回undefined。
4. 使用pipe组合操作符：这是RxJS 6+的标准写法，比旧版本的链式调用更清晰，也方便后续添加更多操作符（比如catchError处理错误）。

内容的提问来源于stack exchange，提问作者Imad El Hitti