在 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<HttpEvent>，這可以通過點擊並切換 map 來完成。 在此鏈接中找到我的解決方案Angular HTTP 攔截器訂閱 observable 然后返回 next.handle 但拋出 TypeError: You provide 'undefined' 。