Angular 5：如何捕获AuthGuard认证时的网络pending状态？

我之前也碰到过一模一样的情况，这个pending状态真的很头疼——因为Angular的HTTP客户端默认不会把挂起的请求判定为错误，导致AuthGuard一直等不到响应，页面就卡在那了。给你几个实用的解决方案，亲测有效：

1. 给AuthGuard的认证请求单独加超时处理 #

最简单直接的办法就是给AuthGuard里的认证请求设置超时时间，超过指定时长就触发错误逻辑，这样就能及时跳转到登录页或者做其他处理。

你可以用RxJS的timeout操作符来实现：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { map, catchError, timeout } from 'rxjs/operators';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.checkAuthStatus().pipe(
      timeout(5000), // 设置5秒超时，可根据实际情况调整
      map(() => true),
      catchError(() => {
        // 超时或其他错误时，跳转到登录页
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return of(false);
      })
    );
  }
}

这样不管是服务器返回错误，还是请求一直pending，只要超过5秒就会进入catchError分支，避免页面无限等待。

2. 全局HTTP拦截器统一处理超时 #

如果你的应用里还有其他请求也可能出现pending的情况，可以创建一个HTTP拦截器，给所有请求统一加上超时逻辑，一劳永逸：

首先创建拦截器：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { Observable } from 'rxjs';
import { timeout } from 'rxjs/operators';

@Injectable()
export class TimeoutInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<any> {
    // 给所有请求设置5秒超时
    return next.handle(req).pipe(timeout(5000));
  }
}

然后在AppModule里注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TimeoutInterceptor } from './timeout.interceptor';

@NgModule({
  // ...其他配置
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true }
  ]
})
export class AppModule { }

这样AuthGuard里的认证请求也会自动应用超时逻辑，不用在每个地方单独设置。

3. 用RxJS的race操作符手动竞争请求与超时 #

如果你需要更灵活的控制，可以用race操作符让认证请求和一个定时器Observable竞争，哪个先完成就用哪个结果：

import { timer, race } from 'rxjs';
import { map } from 'rxjs/operators';

// 在AuthGuard的canActivate方法里
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  const authCheck$ = this.authService.checkAuthStatus().pipe(map(() => true));
  const timeout$ = timer(5000).pipe(
    map(() => {
      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
      return false;
    })
  );

  // 取第一个完成的Observable结果
  return race(authCheck$, timeout$);
}

这种方式和超时操作符效果类似，但能让你在超时触发时做更多自定义逻辑。

额外提醒 #

• 超时时间不要设置得太短，要根据你的服务器平均响应速度来调整，避免正常请求被误判。
• 前端处理只是兜底方案，如果服务器经常出现请求pending的情况，最好排查下服务器端的问题——比如是否有请求阻塞、数据库查询慢、资源不足等情况，从根源解决问题。

内容的提问来源于stack exchange，提问作者k.vincent