angular-7-interceptor-retry-requests-after-token-refresh

Question

我试图在令牌过期的情况下为失败的请求实现一个拦截器。我尝试过多种方法，但仍然没有成功。

我已经参考了下面的URL &阅读多个博客。每个人都在建议转换地图方法，但不是和我一起工作。角4截止器在令牌刷新后重试请求

我尝试将所有请求收集到cachedRequests: Array> =[]中；但是不知道如何使用它来重新触发失败的请求。

在成功的刷新令牌之后，this.next.handle(请求)不会被召回。不过，我可以看到更新的请求对象。

有人能指出角7中的参考点吗？

"rxjs"："~6.3.3"，“rxjs”："^6.5.2"，以实现拦截器。

下面是为我工作的代码，但只得到令牌的响应。

handleError(request: HttpRequest<any>, next: HttpHandler, err) {

        if (err instanceof HttpErrorResponse) {

            if (err.status === 401) {

                this.service.getNewToken().pipe(filter(token => token != null),

                    take(1),

                    switchMap((token: any) => {

                        console.log('token', token);

                        if (token && token.access_token && token.refresh_token) {

                            sessionStorage.setItem('accessToken', token.access_token);

                            sessionStorage.setItem('refreshToken', token.refresh_token);

                        }

                        request = this.addHeader(request);

                        request.headers.getAll('Authorization');

                        return next.handle(request);

                    })).subscribe(results => this.subject.next(results));

            }

        }

    }

```

更新2:在尝试了多种方法之后，我找到了

1. 返回next.handle(请求)；<--这根本不需要调用
2. 返回next.handle(请求).subscribe()；<--这将被调用，但不会更新对请求组件的响应。

指针欣赏

Answer 1

回复晚了。我就是这么做的。

工作与并行请求以及。

import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse, HttpEvent, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { GlobalService } from './global.service';
import { tap, mergeMap, switchMap, filter, take, flatMap, catchError } from 'rxjs/operators';
import { Observable, Subject, throwError, of, BehaviorSubject } from 'rxjs';


@Injectable()
export class InterceptorService implements HttpInterceptor {
    private isRefreshing = false;
    private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
    constructor(public globalService: GlobalService) {
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        request = this.addHeader(request);
        // console.log('request ', request);
        return next.handle(request).pipe(catchError((error: any) => {
            if (error instanceof HttpErrorResponse) {
                if (error.status === 401) {
                    if (!this.isRefreshing) {
                        this.isRefreshing = true;
                        this.refreshTokenSubject.next(null);
                        request = this.addHeader(request);
                        console.log('Token request');
                        return this.globalService.getRefershToken().pipe(
                            switchMap((token: any) => {
                                console.log('inside token');
                                this.isRefreshing = false;

                                if (token && token.access_token && token.refresh_token) {
                                    sessionStorage.setItem('accessToken', token.access_token);
                                    sessionStorage.setItem('refreshToken', token.refresh_token);
                                }
                                // request = this.addHeader(request);
                                // console.log('request: ', request);
                                this.refreshTokenSubject.next(token);
                                return next.handle(this.addHeader(request));
                            }));

                    } else {
                        console.log('inside else call');
                        console.log('token : ', this.refreshTokenSubject.getValue());
                        return this.refreshTokenSubject.pipe(
                            filter(token => (token != null && token != undefined)),
                            take(1),
                            switchMap(() => {
                                console.log('adding header in else');
                                return next.handle(this.addHeader(request))

                            }));
                    }
                }
            }
        }));
    }

    private addHeader(request: HttpRequest<any>) {
        let getEndPoint = request.url.split('/')[request.url.split('/').length - 1];
        if (getEndPoint !== 'refreshToken') {
            const accessToken = sessionStorage.getItem('accessToken');
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${accessToken}`
                }
            });
        } else if (getEndPoint === 'refreshToken') {
            const refreshToken = sessionStorage.getItem('refreshToken');
            request = request.clone({
                setHeaders: {
                    applicationCode: environment.applicationCode,
                    'refresh-token': `${refreshToken}`,
                }
            });
        }
        return request;
    }
}

Answer 2

在HTTP错误401导致api失败后，令牌刷新api被调用，所有失败和缓存的请求都可以使用http拦截器重新尝试。

if (this.isRefreshingToken && !req.url.endsWith(tokenURL)) {
      // check if unique url to be added in cachedRequest

      if (urlPresentIndex == -1) {
        this.cachedRequests.push(req);
        return this.tokenSubject.pipe(
          switchMap(() => next.handle(req)),
          tap((v) => {
            // delete request from catchedRequest if api gets called

            this.cachedRequests.splice(
              this.cachedRequests.findIndex(
                (httpRequest) => httpRequest.url == req.url
              ),
              1
            );
            return EMPTY;
          })
        );
      } else {
        //already in cached request array

        return EMPTY;
      }
    }

有关更多细节，请阅读我的媒体文章Token-Refresh-Interceptor-retry-failed-Requests。

看看它是如何工作的，stackblitz