如何暂停http请求，直到在localstorage中收到并记录令牌？答案

【问题标题】：How to suspend http requests until received and recorded token in localstorage?如何暂停http请求，直到在localstorage中收到并记录令牌？
【发布时间】：2019-09-25 20:16:42
【问题描述】：

我在 Angular 应用程序中进行授权。我通过 OAuth 获取 CODE 并将其发送到后端。后端给我一个令牌。但是当我等待令牌的接收和记录时，几个 BASE（例如菜单计数器）请求返回 401 错误。将令牌写入内存后如何保存所有请求并发送它们？

Angular 7.2.0

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const currentToken = localStorage.getItem('accessToken');
    if (currentToken) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${currentToken}`
        }
      })
    }
    return next.handle((request));
  }

我想在收到令牌后才请求数据，现在我必须刷新页面重新请求所有数据

【问题讨论】：

标签： angular oauth jwt interceptor

【解决方案1】：

所有的 http 请求本质上都是异步的。所以你必须在后端调用 Token 的 subscribe 方法中调用 Menu。所有后续调用也可以在其中进行。

【讨论】：

【解决方案2】：

从您获得令牌的服务中，您可以创建一个主题，在您设置令牌时发出。

export class AccessTokenService {
  private readonly accessToken = new Subject<string>();
  readonly accessToken$ = accessToken.asObservable();

  constructor() {
    // your logic to get token:
    this.getTokenFromSomewhere().subscribe(() => {
      const token = localStorage.setItem('accessToken');
      this.accessToken.next(token);
    });
  }
}

export class CustomHttpInterceptor implements HttpInterceptor {
  constructor(readonly at: AccessTokenService) {}

  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.at.accessToken$.pipe(
      mergeMap((token) => {
        const request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });

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

您还可以在加载其他任何内容之前使用APP_INITIALIZER 设置localStorage 项。但现在是否有用取决于您的用例

【讨论】：