在 Angular 10 中调用另一个 api 拦截器正在阻止当前 api 请求

Question

我正在调用 API 来验证拦截器中的令牌，当我在拦截器中收到 API 调用的响应时，我将返回 next.handle（请求） .但是现在的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()，而是 return Observable，这可以通过点击和切换映射来完成。在 link .

中找到了我的解决方案

在 Angular 10 中调用另一个 api 拦截器正在阻止当前 api 请求

Calling another api in Angular 10 interceptor is blocking the current api request

api

httpclient

angular-http-interceptors

angular