Question

我正在使用Angular 6和RxJs 6.5.2。我一辈子都无法弄清楚链接可观察对象的语法，以将访问令牌添加到HTTP请求并返回满足拦截方法所需的类型。我尝试了订阅，管道，地图的所有排列...

  private getApiToken(): Observable<any> {
    // TODO load from configuration
    return this.httpClient.post("https://localhost:1234/connect/token",
      {
        grant_type: "client_credentials",
        client_id: "MyClient",
        client_secret: "MySecret",
        scope: "ApiScope"
      });
  }


  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   // how do I call getApiToken here?
   return next.handle(req);
  }

请注意，如果我能正常工作，我当然会缓存令牌。

Answer 1

要链接这些文件，您可以执行以下操作

 private getApiToken(): Observable<any> {
    // TODO load from configuration
    return this.httpClient.post("https://localhost:1234/connect/token",
      {
        grant_type: "client_credentials",
        client_id: "MyClient",
        client_secret: "MySecret",
        scope: "ApiScope"
      });
  }


  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   return this.getApiToken()
     .pipe(concatMap((token) => next.handle(req)));
  }

，但是您将不得不对令牌做一些事情。这是我正在使用的应用程序提供的模式。

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   return this.getApiToken()
     .pipe(
       concatMap((token) => {
        let headers = {
          'Authorization': `Bearer ${token}`,
        };

        const dupReq = request.clone({
            setHeaders: headers,
        });

        return next.handle(dupReq);
       }),
     );
  }

希望能满足您的要求。

话虽如此，我建议您在应用启动时获取令牌，而不要等待直到发出请求。我看到的通常的模式是获取令牌作为登录的一部分，在登录时进行保存，如果已登录则获取令牌并添加到请求中，如果没有添加令牌并假定它是未经授权的请求，则为

。

如何编写获取和添加令牌的HttpInterceptor？

1 个答案: