angular - 在 HttpInterceptor 中对 NGRX 可观察对象的 RXJS 链接/处理进行排序

Question

我在派生自 HttpInterceptor (Angular 8) 基类的类中将 JWT 访问令牌附加到 HTTP 请求的标头时遇到问题。

我已将问题缩小到在 Http 拦截器中执行操作的顺序。在令牌从 NGRX 存储（异步）返回之前，请求似乎已发送给调用者。

我不清楚如何确保仅在从 NGRX 商店收到令牌后才返回请求。

export class ServerInterceptor implements HttpInterceptor, OnDestroy {

    private state$: Observable<any>;
    private unsubscribeAll: Subject<any>;

    constructor(
        private store: Store<AuthenticationState>
    ) {
        this.unsubscribeAll = new Subject();
        this.state$ = this.store.select(getAccessToken);
    }

    ngOnDestroy(): void {
        this.unsubscribeAll.next();
        this.unsubscribeAll.complete();
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const output = next.handle(request).pipe(
            takeUntil(this.unsubscribeAll),
            withLatestFrom(
                this.store.select(selectAuthenticationState), (_action, state) => {
                    console.log(state.accessToken);
                    if (state.accessToken) {
                        request = request.clone({
                            setHeaders: {
                              Authorization: `Bearer ${state.accessToken}`
                            }
                          });
                    }
                    console.log('1');
                    return request;
                }
            ),
            switchMap((req) => {
                console.log('2');
                return next.handle(req);
            }),            
        );
        console.log('3');
        return output;
    }
}

控制台的输出按3、1、2的顺序处理拦截器，应该是1、2、3处理。

标签： angularrxjsngrx

Answer 1

您可以考虑将select运算符与您的选择器getAccessToken和“链”可观察对象一起使用。如果您使用或运算符
，则无需订阅。Observable 会在一个值后自动完成。first()take(1)

您的HttpInterceptor可能代码如下所示：

export class ServerInterceptor implements HttpInterceptor {

  constructor(
    private store: Store<AuthenticationState>
  ) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.store.pipe(
      select(getAccessToken),
      first(),
      mergeMap(accessToken => {

        const authReq = !!accessToken ? request.clone({
          headers: request.headers.set('Authorization', `Bearer ${accessToken}`)
        }) : request;

        return next.handle(authReq);
      })
    );
  }
}

关于这个主题的一些资源：

• 使用 NgRx Store Auth Token 和 Angular HttpInterceptor by Antony Derham
• WASi 使用NGRX将 JWT 令牌添加到 Angular HTTP 请求