Angular HTTP 客户端在拦截器中返回 null

Question

在下面的代码中，我发布了两个代码在控制台中返回的示例。对于拦截器，我应该返回一个可观察对象。我已经使用 switchmap 将本地存储 promise 转换为可观察对象。我仍然用这种方法返回 null。我的 observable 包裹在函数周围，所以我应该得到一个 null 以外的值。谢谢!

拦截器.js

import { fromPromise } from 'rxjs/observable/fromPromise';

accessToken: string; 
emptyToken: any;


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

//example

        this.storage.get('token').then((val) => {
             this.accessToken = val
            return console.log(this.accessToken, ' this is returning null value for token')
        })

//trying to return actual header
          return fromPromise(this.storage.get('token')).switchMap(access => {

            this.accessToken = access
            console.log(this.accessToken, ' this is returning null value for token')
            const authReq = req.clone({
                setHeaders: {
                Authorization: this.accessToken
                }
                });

                return next.handle(authReq)
           })
}
}

我已经添加了下面更新的代码，请忽略上面的代码并仍然得到相同的结果。正如下面所说的答案之一，他们的所有假设都是正确的。它归结为在登录可观察对象中获取 token 。问题不在于拦截器，该代码工作正常。我需要以某种方式获取我的异步值而不返回 null。 this.storage.ready() 方法也给了我相同的结果。 在我的拦截器之后调用身份验证服务，因此我还没有生成任何 token 。我将如何首先调用我的身份验证服务？

login(userName: string, password: string, route: string = null): any {
     this.storage.set('tokens', 'able to retrieve this token value inside interceptor');

    this.logout(false);

    this.doLogin(userName, password)
      .subscribe(response => {

        let token:string = JSON.stringify(response.access_token);
        this.storage.set('token', token)

      }

      }

拦截器.ts

get(url: string, options?: RequestOptionsArgs): Observable<Response> {
  return Observable.fromPromise(
    this.getRequestOptionArgs(options)
  ).mergeMap((options) => {
    return super.get(url, options)
  })
  }

private getRequestOptionArgs(options?: RequestOptionsArgs) {
    return this.storage.get('token').then((token) => {
      console.log(token, 'token for the get')
      if (options == null) {
        options = new RequestOptions();
      }

      if (options.headers == null) {
        options.headers = new Headers();
      }

      if (token !== null) {
        options.headers.append('Authorization', 'Bearer ' + token);
      }
      options.headers.append('Content-Type', 'application/json');

      return options;
    });
  }

Answer 1

我认为问题在于您的 StorageService 正在返回 null，而不是拦截器的问题。

存储服务使用 Promise，这意味着它只会发出一个值。如果您得到的是 null，那么我猜您还没有存储 token 。

您首先从哪里获得 token ？服务器？在这种情况下，第一个请求将没有 token 。

但是...您已经说过，当您直接(同步)访问 localStorage 时，您会获得一个值并且一切正常。所以我假设您已经在存储中有一个 token 。

查看 Ionic Storage 的文档看起来还有另一种可能性。存储有一个 ready 方法，所以可能存储还没有准备好。

您可以尝试这样的事情(未经测试)，您首先等待准备好的 promise 在尝试获取 token 之前解决:

import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/observable/fromPromise';

@Injectable()
export class Interceptor implements HttpInterceptor {

    constructor (private storage: StorageService) {}

    intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // chain the ready promise with the get token promise
        return Observable.fromPromise(this.storage.ready().then(this.storage.get('token')))
            .mergeMap((token: string) => {

                const authReq = request.clone({
                    setHeaders: {
                        Authorization: token
                    }
                });

                return next.handle(authReq);

            });
    }
}

只是一个猜测...