如何在 HttpInterceptor 中使用来自 NGXS 存储的值？

Question

我对 Angular 很陌生。我正在使用 Angular 6 和 NGXS 进行状态管理。

我的 NGXS 商店有一个userreducer，其接口是

/* src/app/store/models/user.model.ts */
export interface User {
    serverToken? : string;
    // and other unrelated stuff
}

我想用serverToken在Authorization标题中HttpInterceptor。

这是我目前的HttpInterceptor代码

import {Store, Select} from '@ngxs/store';
import {Injectable} from '@angular/core';
import {HttpInterceptor, HttpHandler, HttpRequest, HttpEvent} from '@angular/common/http';

import {Observable} from 'rxjs';
import {User} from '../store/models/user.model';

@Injectable()
export class ApiInterceptor implements HttpInterceptor {
    constructor(private store : Store) {}
    @Select()user$ : Observable < User >;

    intercept(req : HttpRequest < any >, next : HttpHandler) : Observable < HttpEvent < any >> {
        let options = {
            url: `https://base-url.com/api/${req.url}`
        };

        const serverToken = '???';
        if (serverToken) // if not empty
            options = {
                ...options,
                headers: req
                    .headers
                    .set('Authorization', `JWT ${serverToken}`)
            }

        const duplicate = req.clone(options);

        return next.handle(duplicate);
    }
}

所以我的问题是：如果不为空，如何正确优雅地使用user$可观察对象来获取serverToken并使用它？HttpInterceptorserverToken

Answer 1

如果您更喜欢更“可观察”的方法，请尝试以下操作：

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

  return this.serverToken$.pipe(
    take(1),
    concatMap(serverToken => {
      if (serverToken) {
        options = {
          ...options,
          headers: req.headers.set('Authorization', `JWT ${serverToken}`)
        }
        const duplicate = req.clone(options);
        return next.handle(duplicate)
      } else {
        // next() without changing req
        return next(req)
      }
    }
  )
}

您还需要定义一个从拦截器类@Selector返回用户令牌和@Select它的。

注意：我不熟悉 HTTP 拦截器，只是根据我在intercept().