Angular 5中守卫返回Observable后导航被取消问题

我帮你排查过这类问题，通常都是路由守卫里的Observable没有被正确处理，导致Angular路由器一直等待信号，最终取消导航。下面给你几个针对性的解决思路：

1. 确保Observable发出值后完成 #

Angular路由器会等待守卫返回的Observable发出一个布尔值并完成，才会继续导航流程。如果你的Observable只发出值但没完成，路由器会一直挂起，最后取消导航。

比如很多人会犯这样的错误：

// 错误示例：Observable没有完成
canActivate(): Observable<boolean> {
  return new Observable(observer => {
    this.authService.checkLogin().subscribe(isLogged => {
      observer.next(isLogged);
      // 忘记调用complete()，路由器会一直等
    });
  });
}

最简单的修复方法是用take(1)操作符，它会自动在Observable发出一次值后完成：

import { take } from 'rxjs/operators';

// 正确写法
canActivate(): Observable<boolean> {
  // take(1)确保Observable只发一次值就完成
  return this.authService.checkLogin().pipe(take(1));
}

或者如果你是手动创建Observable，记得调用observer.complete()：

canActivate(): Observable<boolean> {
  return new Observable(observer => {
    this.authService.checkLogin().subscribe(isLogged => {
      observer.next(isLogged);
      observer.complete(); // 必须调用完成
    });
  });
}

2. 捕获Observable的错误 #

如果你的Observable发出了错误（比如登录状态请求失败），Angular会直接判定导航不允许，取消操作。所以一定要在守卫里捕获错误，返回明确的布尔值：

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

canActivate(): Observable<boolean> {
  return this.authService.checkLogin().pipe(
    take(1),
    catchError(error => {
      console.error('登录状态检查失败:', error);
      // 捕获错误后返回false，或者跳转到登录页
      return of(false);
    })
  );
}

3. 检查路由配置是否正确 #

先确认你的路由配置没有语法错误，比如根路由的重定向必须加pathMatch: 'full'，否则可能导致路由匹配异常，间接影响守卫执行：

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, // 必须加pathMatch
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'customers', component: CustomersComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '/login' }
];

4. 调试确认守卫的执行结果 #

可以在守卫里加日志，确认Observable是否发出了预期的布尔值：

import { take, tap } from 'rxjs/operators';

canActivate(): Observable<boolean> {
  return this.authService.checkLogin().pipe(
    take(1),
    tap(result => console.log('AuthGuard返回结果:', result)), // 打印结果
    catchError(error => {
      console.error('AuthGuard出错:', error);
      return of(false);
    })
  );
}

通过控制台日志就能快速定位是守卫逻辑没触发，还是返回了不符合预期的值。

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