Ionic 2 - 从存储值中获取令牌并在 HTTP 请求之前设置 Header

Question

我正在使用 ionic/storage 包为用户登录后存储 api_token，这样我就可以使用唯一令牌与 API 进行交互。

我面临的问题是我需要通过 storage.get 获取值，其中 return 是一个承诺，结果是我想设置的 header 未被设置时间.

我需要 return RequestOptions 的一个实例，但不知道如何添加 header 我从承诺中检索到的。添加 header 与 localStorage 同步在测试时工作正常，所以问题一定是异步执行。

createAuthorizationHeader(headers: Headers) {
    // this does add the header in time
    localStorage.setItem('api_token', 'some token');
    headers.append('Authorization', 'Bearer ' + localStorage.getItem('api_token'));

    // this does not add the header in time
    return this.storage.get('api_token').then((value) => {
        headers.append('Authorization', 'Bearer ' + value);
    });
}

getHeaders(path): RequestOptions {
    let headers = new Headers({
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    });

    if(!this.isGuestRoute(path)) {
        this.createAuthorizationHeader(headers);
    }

    return new RequestOptions({ headers: headers });
}

get(path: string) {
    return this._http.get(this.actionUrl + path, this.getHeaders(path))
        .map(res => res.json())
        .catch(this.handleError);
}

编辑：工作代码现在看起来像这样

getApiToken(): Observable<Headers> {
    return Observable.fromPromise(this.storage.get('api_token'));
}

getHeaders(): Headers {
    return new Headers({
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    });
}

get(path: string) {
    let headers: Headers = this.getHeaders();

    if(!this.isGuestRoute(path)) {
        return this.getApiToken().flatMap(data => {
            headers.append('Authorization', 'Bearer' + data);

            return this._http.get(this.actionUrl + path, { headers : headers })
                .map(res =>  res.json())
                .catch(this.handleError);
        });
    }

    return this._http.get(this.actionUrl + path, { headers : headers })
        .map(res => res.json())
        .catch(this.handleError);
}

Answer 1

看看我的类似问题

如果您将 Promise 转换为 Observable，您将能够使用 rxjs flatMap 函数。

让我向您展示您当时的样子

getApiToken(): Observable<Headers> {
    return Observable.fromPromise(this.storage.get('api_token'));
   //OR return Observalbe.of(this.storage.get('api_token'));
}

getHeaders(): Headers { 
     //create all headers here except the 'api_token'
     .....
}


get(path: string): Observable<any> {
    let headers: Headers = this.getHeaders();
    return this.getApiToken().flatMap(data => {

       headers.append('Authorization', 'Bearer'+data);

       return this.http.get(this.actionUrl + path, headers)
          .map(res =>  res.json()) 
          .catch(this.handleError);
    });
}

或者（刚刚了解到这个所以不确定它是否有效）

createAuthorizationHeader(headers: Headers) {
    // this does add the header in time
    localStorage.setItem('api_token', 'some token');
    headers.append('Authorization', 'Bearer ' + localStorage.getItem('api_token'));

    // this does not add the header in time
    let api_token = await this.storage.get('api_token');
    headers.append('Authorization', 'Bearer ' + api_token);
}

Answer 2

我建议查看拦截器：https://angular.io/guide/http（搜索名为 "Setting new headers" 的部分）。我尝试使用 BaseRequestOptions，但仍然会导致异步问题。

重新设置 Ivaro18 答案，将 header 设置为收到令牌并保存在存储中，当用户 returns 为 app/page 终止应用程序/关闭浏览器后？ header 设置在内存中，因此不会持久化。

Ionic 2 - 从存储值中获取令牌并在 HTTP 请求之前设置 Header

Ionic 2 - Get token from Storage value and set Header before HTTP Request

http

web-sql

ionic2

angular