Angular 6中如何正确处理Observable与订阅？求解决方案

兄弟，你踩了异步操作的经典坑了😅——你现在的isAuthenticated()方法里，subscribe回调里的return true/false根本不会把值返回给方法调用者！因为HTTP请求是异步的，subscribe只是注册了一个“未来才会执行的回调”，方法本身会直接返回undefined，路由守卫自然拿不到正确的布尔值。

正确的做法是让isAuthenticated()直接返回一个Observable<boolean>，把异步操作的结果转换后交给路由守卫处理——Angular的路由守卫本身就支持返回Observable类型，会自动帮你订阅并判断结果。

第一步：修改服务中的isAuthenticated方法 #

把原来的订阅逻辑改成用pipe操作符转换Observable结果：

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

// ...

isAuthenticated(): Observable<boolean> {
  return this.verify().pipe(
    // 请求成功时返回true，还能顺便处理用户数据
    map((userData) => {
      // 比如把用户信息存到服务里供后续使用
      this.currentUser = userData;
      return true;
    }),
    // 请求失败（比如未授权、token无效）时返回false
    catchError((error) => {
      // 这里可以加错误处理逻辑，比如清除本地缓存的token
      this.clearAuthData();
      return of(false);
    })
  );
}

第二步：修改路由守卫的canActivate方法 #

直接返回这个Observable就行，Angular会自动处理订阅和结果判断：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.auth.isAuthenticated();
}

为啥原来的写法不行？ #

简单说，subscribe里的代码是异步执行的：当你调用isAuthenticated()时，代码会先执行this.verify().subscribe(...)，然后立刻结束方法（返回undefined）；等到HTTP请求完成后，才会执行回调里的return true/false，但这时候方法早就返回了，路由守卫根本拿不到这个值。

而返回Observable的方式，是把异步操作的“控制权”交给了路由守卫，Angular会等待Observable发出值后，再决定是否允许进入路由。

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