在 Angular 10 拦截器中调用另一个 API 会阻塞当前的 API 请求

Question

我正在调用 API 来验证拦截器中的令牌，当我在拦截器中收到 API 调用的响应时，我将返回

next.handle(request)

。但当前的 API 在此之后没有给出响应。有人可以解释一下为什么在我从验证令牌服务获得成功响应后，当前调用的实际 API 没有给出响应吗？

这是我的代码：

import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse, HttpResponse } from 
'@angular/common/http';
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';
import { EMPTY, throwError } from 'rxjs';
import { RestServiceService } from 'src/app/services/rest-service.service';
import { AppConfig } from 'src/app/config/app.staticValues';
import { LoginService } from '../services/login.service';
import { Router } from '@angular/router';

@Injectable()
export class TokenAuthInterceptor implements HttpInterceptor {
    public count = 0;
    constructor(private restService: RestServiceService, private loginService: LoginService, public  
router: Router) { }

    intercept(request: HttpRequest<any>, next: HttpHandler) {
        // console.log('inside auth interceptor');
        if (request.url.includes('jwt')) {
            return next.handle(request)
            .pipe(
                tap(
                    (event) =>{
                        if(event instanceof HttpResponse){
                            console.log(event);
                                                   

                        }
                    },
                    (error: HttpErrorResponse) =>{
                        console.log(error);
                        this.router.navigate(['/login']);
                    }        
                )
            )
        }
        else if (request.url.startsWith('http')) {
            const validateRequestUrl = AppConfig.HOST_NAME + AppConfig.AUTHENTICATION.validateToken;
            const token = this.sessionStorage.get('token');

            this.restService.validateToken(validateRequestUrl, token).subscribe((data) => {
                if(data.auth === true) {
                    return next.handle(request);
                } else {
                    return EMPTY;
                    this.router.navigate(['/login']);
                }
            }, (error) => {
                return EMPTY;
            })
        }
    }


}    

Answer 1

不要在拦截器中订阅，而是使用以下代码:-

import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse, HttpResponse } from 
'@angular/common/http';
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';
import { EMPTY, throwError } from 'rxjs';
import { RestServiceService } from 'src/app/services/rest-service.service';
import { AppConfig } from 'src/app/config/app.staticValues';
import { LoginService } from '../services/login.service';
import { Router } from '@angular/router';

@Injectable()
export class TokenAuthInterceptor implements HttpInterceptor {
    public count = 0;
    constructor(private restService: RestServiceService, private loginService: LoginService, public  
router: Router) { }

    intercept(request: HttpRequest<any>, next: HttpHandler) {
        // console.log('inside auth interceptor');
        if (request.url.includes('jwt')) {
            return next.handle(request)
            .pipe(
                tap(
                    (event) =>{
                        if(event instanceof HttpResponse){
                            console.log(event);
                                                   

                        }
                    },
                    (error: HttpErrorResponse) =>{
                        console.log(error);
                        this.router.navigate(['/login']);
                    }        
                )
            )
        }
        else if (request.url.startsWith('http')) {
            const validateRequestUrl = AppConfig.HOST_NAME + AppConfig.AUTHENTICATION.validateToken;
            const token = this.sessionStorage.get('token');
            const dupReq = request.clone({url: validateRequestUrl});
            return next.handle(dupReq).pipe(tap((event) => {
               if(event instanceof HttpResponse){
                if(event.body.auth === true) {
                   return event.body;
                } else {
                    return EMPTY;
                    this.router.navigate(['/login']);
                }
              }
            }, (error) => {
                return EMPTY;
            }));
        }
    }

Answer 2

上述解决方案似乎对我不起作用。实际上，我不需要在拦截器内 subscribe() ，而是返回一个 Observable ，这可以通过点击并切换地图来完成。在此链接中找到了我的解决方案Angular HTTP Interceptor subscribing to observable and then returned next.handle but throwing TypeError: Youprovid 'undefined'.