Angular: дождитесь возвращения одного наблюдаемого, чтобы инициировать другое

devC спросил: 03 ноября 2018 в 08:51 в: angular

Мой бизнес-сценарий выглядит следующим образом: я сначала отправляю HTTP-запрос к конечной точке token () в WebAPI, чтобы получить токен авторизации (это происходит в app.component.ts). Затем у меня есть модуль token-interceptor для добавления токена в заголовки HTTP последующих запросов.

Затем у меня есть конечная точка getLanguages ​​() в WebAPI, и она вызывается в моем компоненте header - header .component.ts. Таким образом, этот вызов проходит через перехватчик HTTP и пытается добавить токен, сгенерированный в заголовок запроса, но не удается, потому что конечная точка token () еще не возвращена, поэтому конечная точка getLanguages ​​() не аутентифицирована.

Я явно что-то здесь упускаю. Я читал о ReplaySubject, но я не уверен, как собрать все воедино.

Вот мой текущий код.

app.component.html:

<app-header>
</app-header>
<router-outlet></router-outlet>
<app-footer>
</app-footer>

auth.service.ts:

 authenticateClient(){let body = new HttpParams()
  .set('client_id', AppConst.GLOBAL.auth.client_id)
  .set('grant_type', AppConst.GLOBAL.auth.grant_type)
  .set('scope', AppConst.GLOBAL.auth.scope);const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded'
  })
};let authGatewayUrl: string = AppConst.GLOBAL.authApiUrl + window.location.search;return this.http.post(authGatewayUrl, body.toString(), httpOptions)
          .pipe(map((res: any) => this.token = res), catchError(this.handleErrorObservable));
      }  getToken(): Token {
    return this.token;
  }

app.component.ts:

token: Token; ngOnInit() {
// get the authentication token and store it for usage in subsequent API calls.
this.authService.authenticateClient().subscribe(
  obj => this.token = obj as Token,
  err => alert(err)
  );
  }

app.service.ts:

  getLanguages() {
 return this.http.get(this.localeApiUrl)
  .pipe(map((res: any) => this.languages = res), catchError(this.handleErrorObservable));
  }

header.component.ts:

   constructor(private appService: AppService) {
    this.appService.getLanguages().subscribe(obj => this.languages = obj);  };

HTTP-interceptor.ts:

intercept(req: HttpRequest<any>, next: HttpHandler) {
// exclude the token API endpoint from the interception
const loginUrl: string = AppConst.GLOBAL.authApiUrl;if (req.url.search(loginUrl) === -1) {
  // Get the auth token from the service.
  const authToken = this.auth.getToken();  //// Clone the request and set the new header in one step.
  req = req.clone({ setHeaders: { Authorization: authToken.access_token } });
}//// send cloned request with header to the next handler.
return next.handle(req);
 }

0 ответов