使用拦截器设置Authorization头，拦截器包含用于检索令牌的observable

Question

我想使用拦截器将token附加到请求头。令牌是使用@ngx-pwa/local-storage存储的，它通过Observable返回令牌。

ERROR TypeError: "You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable."

我通过以下代码来面对这个错误-

import { finalize } from 'rxjs/operators';
import { HttpClient, HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { catchError, tap, map } from 'rxjs/operators';

import { LocalStorage } from '@ngx-pwa/local-storage';
import { User } from '../models/user';

@Injectable({
    providedIn: 'root'
})
export class httpInterceptorTokenService implements HttpInterceptor {

    constructor ( private localStorage: LocalStorage ) {  }

    private isAuthError(error: any): boolean {
      return error instanceof HttpErrorResponse && error.status == 401;
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      let intialRequest = req.clone();

      return next.handle(req).pipe(
        catchError((error) => {
          if (!this.isAuthError(error)) {
            return Observable.throw(error);
          }

          this.localStorage.getItem<User>('user').subscribe((userData:User) => {
            intialRequest = intialRequest.clone({
              setHeaders: {
                'Authorization': userData.token
              }
            });
            return next.handle(intialRequest).pipe(tap(res => res));
          }); // LOCAL-STORAGE
        })
      ); // RETURN
    } // INTERCEPT
} // EXPORT

有没有解决这个问题的方法，或者有没有其他方法可以将token附加到每个XHR的头部？

Answer 1

出现该错误的原因是，当一个可观察对象是一个身份验证错误时，您不会返回该对象。return语句位于订阅块内。此外，正如@jriver27所指出的，您将在处理错误响应的管道中添加请求标头。您需要在进行http调用之前处理它。

intercept(request: HttpRequest<any>, next: HttpHandler):   Observable<HttpEvent<any>> {
    let result: Observable<HttpEvent<any>> =    next.handle(this.addHeaders(request));
    return result;
}

private addHeaders(request: HttpRequest<any>):   HttpRequest<any> {
    const alteredRequest = request.clone({
      setHeaders: {
        Authorization: `Dummy-Auth   ${this.getDummyToken()}`
            }
    });
    return alteredRequest;
}