Angular拦截器校验Cookie失效弹出snackbar时pipe调用错误如何解决

问题核心原因 #

Angular 规定HttpInterceptor接口的intercept方法必须始终返回Observable<HttpEvent<any>>类型的对象，你现有代码在Cookie校验失败的分支中没有添加返回语句，导致该分支返回undefined，后续拦截器执行next.handle(request)拿到的就是undefined，调用pipe方法自然抛出空指针错误。

修复方案 #

你只需要在校验失败的分支返回RxJS提供的空可观察对象EMPTY即可，它会直接进入完成状态，不会发出任何HTTP事件，也不会抛出异常，刚好匹配你不需要继续执行后续请求和拦截器的场景。
修复后的完整代码如下：

// 首先导入需要的依赖
import { EMPTY, Observable } from 'rxjs';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  if (this.rightsService.actualCookies && this.cookiesService.get('cookie') !== this.rightsService.actualCookies) {
    const snackBarRef = this.snackBar.open('Session expired', 'refresh');
    snackBarRef.onAction().subscribe(() => {
      window.location.pathname = window.location.pathname.split('/')[0]
    });
    // 新增返回空Observable，终止请求链
    return EMPTY;
  }
  // 去掉冗余else分支，代码更简洁
  return next.handle(req);
}

可选拓展方案 #

如果你需要在全局错误处理逻辑中统一捕获会话过期的错误，可以将返回EMPTY替换为返回错误可观察对象：

import { throwError } from 'rxjs';

// 替换return EMPTY为以下代码
return throwError(() => new Error('会话已过期'));

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