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);
      })
    );
  }
}

有关此主题的一些资源：

Using NgRx Store Auth Token with Angular HttpInterceptor，作者：安东尼·德勒姆
Add JWT Token to Angular HTTP Requests Using NGRX，由WASi

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

1 个答案: