javascript - Angular 4 Interceptor ververs slechts één keer token en niet bij elk verzoek bij 401-fout

Ik wil mijn token verversen. Ik gebruik een interceptor :

app.interceptor.ts

import { Observable } from 'rxjs';
import { Injectable, Inject, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { UserService } from "./user/services/user.service";

@Injectable()
export class AngularInterceptor implements HttpInterceptor {
    public userService;

    constructor(private injector: Injector) {
    }

    private applyCredentials = function (req) {
        return req.clone({
            headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'))
        });
    };

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.userService = this.injector.get(UserService);

        return next.handle(this.applyCredentials(req))
            /*.do(event => {
                if (event instanceof HttpResponse) {
                    console.log(event);
                }
            })*/
            .catch((res) => {
                console.log('Token refresh');

                if (res.status === 401 || res.status === 403 || res.status === 500) {
                    return this.userService.refreshToken().first().flatMap((data: any) => {
                        console.log(data.data);
                        if (data.data !== '') {
                            localStorage.removeItem('token');
                            localStorage.setItem('token', data.data);

                            this.userService.token = localStorage.getItem('token');
                            this.userService.isAuthenticated = true;
                        } else {
                            this.userService.logOut();

                            return Observable.throw(res);
                        }

                        return next.handle(this.applyCredentials(req));
                    });
                }
                /*else if (res.status === 500) {
                    this.userService.logOut();
                }*/

                return Observable.throw(res);
            });
    }
}

Mijn token wordt vernieuwd, het werkt. Maar ik heb een probleem omdat als ik meerdere aanvragen heb, mijn token ververst, en ververst, en ververst. Als ik 3 aanvragen heb, wordt het token drie keer ververst.

In mijn component.ts :

Observable.forkJoin(
        this.countryService.getCountries(),
        this.movieService.getMovies(),
        this.userService.getUsers()
    ).subscribe(
        data => {
            console.log(data[0]);
            console.log(data[1]);
            console.log(data[2]);
            ...
            this.initPage();
        },
        err => console.error(err)
)

Mijn token ververs drie keer. Ik zou alle verzoeken willen laden en daarna mijn initPage() functie uitvoeren.

Ik zou mijn token graag slechts één keer willen verversen en daarna alle verzoeken opnieuw verzenden.