基于Observable结果的Angular5 HttpInterceptor

Question

我正在尝试使用Angular5实现HttpInterceptor，在所有HTTP请求中注入授权头。

我依赖于第三方库（ADAL，这里称为AuthService），该库公开了一个acquireToken()方法，用于获取用于Bearer授权的令牌。

问题是aquireToken()返回一个observable对象，我必须订阅才能获得我需要的真实字符串。

因此，我的代码从未注入头部，我认为是因为next.handle()在acquireToken()返回任何值之前执行。

如何确保令牌被检索后才调用下一个处理程序？

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import {AuthService} from 'mylibrary';

@Injectable()
export class MyInterceptor implements HttpInterceptor {

    constructor(private auth: AuthService) { }

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

        let headers = req.headers || new HttpHeaders();

        this.auth.acquireToken(req.url)
            .subscribe((token: string) => {
                headers = headers.append('Authorization', 'Bearer ' + token);
            });

        return next.handle(req.clone({ headers: headers }));
    }
}

- leonixyz

Answer 1

这段代码可以完成任务，诀窍是使用 mergeMap。

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { AdalService } from './adal.service';
import 'rxjs/add/operator/mergeMap';

@Injectable()
export class AdalInterceptor implements HttpInterceptor {

    constructor(private adal: AdalService) { }

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

        // if the endpoint is not registered then pass
        // the request as it is to the next handler
        const resource = this.adal.GetResourceForEndpoint(req.url);
        if (!resource) {
            return next.handle(req.clone());
        }

        // if the endpoint is registered then acquire and inject token
        let headers = req.headers || new HttpHeaders();
        return this.adal.acquireToken(resource)
            .mergeMap((token: string) => {
                // if the user is not authenticated then drop the request
                if (!this.adal.userInfo.authenticated) {
                    throw new Error('Cannot send request to registered endpoint if the user is not authenticated.');
                }

                // inject the header
                headers = headers.append('Authorization', 'Bearer ' + token);
                return next.handle(req.clone({ headers: headers }));
            }
        );
    }
}

- leonixyz

---

你好，朋友。我很难理解mergeMap操作符的使用方法，以至于我在到处寻找信息时看到了这个问题。我知道它用于混合两个或更多的Observables并只获得一个，但是我看过一些代码，他们只使用一个Observable，这让我很困惑。 - JulianProg

只是提醒一下，如果它是一个可观察对象，请添加 return this.adal.acquireToken(resource).pipe(mergeMap(...))。 - Akshay

Answer 2

可能的问题在这里

 constructor(private auth: AuthService) { }

提供程序在拦截器内不可用

解决方案

使用Injector来注入您的服务

// 1. import the injector
import { Injectable, Injector } from '@angular/core';
// 2. create a constant of your service
private auth: AuthService;
// 3. add injector into contsructor; remove authService from constructor
constructor(private injector: Injector) { }
// 4. now create instance of your service inside intercept()
intercept() {
const auth = this.injector.get(AuthService);
// 5. now call method on this auth object

- xkeshav