时间戳

首页 > 解决方案 > Angular 8 订阅拦截器中的 observable

angular - Angular 8 订阅拦截器中的 observable

问题描述

我正在尝试编写一个 HTTP 拦截器来为请求添加一个“访问级别”参数。我正在尝试从可观察的 currentAccessLevel$ 中获取值。但是，observable 没有正确返回，拦截器中断了整个请求周期。

这个问题在这里和这里已经有了答案，但是，接受的答案似乎在 Angular 8 中不起作用。我不确定我是否做错了什么，或者是否对 Angular 8 中的拦截器进行了某种更改.

我还尝试使用 switchMap、flatMap 和 mergeMap。

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { AuthService } from 'src/app/services/auth/auth.service';

@Injectable()
export class AccessLevelInterceptor implements HttpInterceptor {
  private accessLevel: string;

  constructor(private authService: AuthService) { }

  // Intercept HTTP Requests
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Get current value of access level observable from authentication service
    return this.authService.currentAccessLevel$
      .mergeMap(res => next.handle(request));

  }

}

currentAccessLevel$ 是在服务中作为 BehaviorSubject 创建的字符串值，然后转换为 Observable。这样，字符串的当前值可以在多个组件之间共享。

// Create a BehaviorSubject to track and share updates to currentAccessLevel value
  private currentAccessLevel: string;
  currentAccessLevelSubject: BehaviorSubject<string> = new BehaviorSubject(this.currentAccessLevel);
  currentAccessLevel$ = this.currentAccessLevelSubject.asObservable();

标签： angularrxjsobservableinterceptorangular8

解决方案

是的，自 Rxjs 5.5 以来，这不再有效。您需要使用管道方法来连接运算符：

return this.authService.currentAccessLevel$
      .pipe(mergeMap(res => next.handle(request)));

在这里查看以了解有关管道的更多信息。

推荐阅读