HttpInterceptor中NGRX观测数据的测序RXJS链/处理

Question

在从HttpInterceptor (角8)基类派生的类中，我很难将JWT访问令牌附加到HTTP请求的头上。

我已经将问题缩小到了在Http Interceptor中执行操作的顺序。在从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。

Answer 1

您可以考虑在选择器select和“链式”可观测值中使用getAccessToken运算符。

如果您使用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存储带角HttpInterceptor的Auth令牌 (安东尼·德汉姆)
• 使用NGRX向角HTTP请求添加JWT令牌 by WASi