在类型 'AuthenticationInterceptor' 中具有可观察 'intercept' 的 HttpInterceptor 在基本类型 'HttpInterceptor' 中不 > 相同 属性

Question

我不明白这段代码有什么问题 你能帮帮我吗？

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

import { Observable } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

import { AuthenticationSharedStorage } from '../storages/authentication.storage';
import { AuthenticationToken } from '../../models/authentication.model';

@Injectable()
export class AuthenticationInterceptor implements HttpInterceptor {

  constructor(private storage: AuthenticationSharedStorage) {}
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    this.storage.getData()
    .pipe(
      switchMap((data:AuthenticationToken )=> {
      if(data){
        const authToken = data.token;
        const authReq = req.clone({ setHeaders: { Authorization: authToken } });
        return next.handle(authReq);
      }
      return next.handle(req);
      })
    );
  }
}

完整的错误是：

Property 'intercept' in type 'AuthenticationInterceptor' is not assignable to the same property in base type 'HttpInterceptor'. Type '(req: HttpRequest, next: HttpHandler) => void' is not assignable to type '(req: HttpRequest, next: HttpHandler) => Observable>'. Type 'void' is not assignable to type 'Observable>'. 16:3

Answer 1

您需要 return 来自 intercept 的 Observable<HttpEvent<any>> - 目前没有 returned。假设 this.storage.getData() return 一个（可能是真的，因为它有 pipe()）然后在它前面放一个 return。

intercept(req: HttpRequest<any>, next: HttpHandler) {
  return this.storage.getData()
  //...
}

Answer 2

我也有同样的错误，问题是项目和npm包的rxjs版本不同造成的

我通过在项目中安装相同版本的 rxjs 来解决这个问题。