ionic-framework - Ionic 3 + HttpClientModule 和存储中的 token

Question

我已经构建了一个拦截器，用于向 PHP 后端发出 HTTP 请求。
这个后端为应用程序提供了一个 JWT token ，我将它保存在 Ionic Storage 中。
但我想从 Storage 中获取该 token 并将其作为 header 添加到 HTTP 请求中。

下面是我的带有硬编码 token 的拦截器。
这有效，我得到了后端的响应。

看到更新@这篇文章的底部

http-interceptor.ts

import { HttpInterceptor, HttpRequest } from '@angular/common/http/';
import {HttpEvent, HttpHandler} from '@angular/common/http';
import { AuthProvider } from "../providers/auth/auth";
import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {Storage} from "@ionic/storage";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const changedReq = req.clone({headers: req.headers.set('Authorization', 'Bearer MY TOKEN')});
        return next.handle(changedReq);
    }

}

但是如何将 token 从存储中获取到 header 中。
我搜索了很多，大多数教程/示例都来自较旧的 HTTP 模块。如果有人有想法或有更新示例？

更新

Oke 下面的代码发送 token

intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
        return fromPromise(this.Auth.getToken())
            .switchMap(token => {
                const changedReq = req.clone({headers: req.headers.set('Authorization', 'Bearer ' + token )});

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

有一个异常(exception)，即我第一次访问该页面:)

Answer 1

对于像我一样遇到这种情况并正在使用 的任何人rxjs >=5.5.0 那么你可以这样做:

auth-interceptor.ts

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

constructor(private authService: AuthService) { }

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

    return from(this.authService.getToken()).pipe(mergeMap((token) => {
        const changedReq = req.clone({
            setHeaders: {
                Authorization: `Bearer ${token}`
            }
        });

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

auth-service.ts

public async getToken() {
    return await this.storage.get('ACCESS_TOKEN');
}