Angular 7拦截-发出请求时如何解决重复的HttpClient调用

Question

我在angular 7中使用了带有HttpInterceptor的拦截器，但是我的所有http请求都被复制了。

这是针对带打字稿的Angular版本7.2.14。

declare var require: any
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Injectable } from '@angular/core';
import { UserRoles } from '../models/Companies';
import { AuthenticatedUser } from '../models/AuthenticatedUser';
import 'rxjs/add/operator/share';

var jwtDecode = require('jwt-decode');

interface LoginResult {
    bearerToken: string;
}

interface ResetResult {
    response: boolean;
}

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

@Injectable({
    providedIn: 'root',
})

export class AuthenticationService {
    private currentUserSubject: BehaviorSubject<LoginResult>;
    password: string;

  login(username: string, password: string): Observable<LoginResult> {
        return this.http.post<LoginResult> 
   (`${environment.apiUrl}/api/users/authenticate`, { username, password }, 
    httpOptions)
            .pipe(map(token => {
                // login successful if there's a jwt token in the response
                if (token) {
                    // store user details and jwt token in local storage to 
                     keep user logged in between page refreshes
                    localStorage.setItem('currentUser', 
                    JSON.stringify(token));

                    this.currentUserSubject.next(token);
                }
                return token;
            }));
    }
}

Image of my duplicate request calls

Image of network requests

如您所见，应该发出一个请求，但是当前每次都会触发重复的请求。