Angular 8拦截刷新令牌的调用

拦截刷新令牌的调用 - Angular 8

typescript
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    // 在这里执行拦截操作
    return next.handle(req);
  }
}

typescript
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    // 获取存储在本地的令牌
    const token = localStorage.getItem('access_token');
    // 克隆请求并添加令牌
    const authReq = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
    // 继续请求
    return next.handle(authReq).pipe(
      catchError(error => {
        // 检测是否是令牌过期错误
        if (error.status === 401) {
          // 在这里执行令牌刷新操作
          return this.refreshTokenAndRetry(req, next);
        }
        // 如果不是令牌过期错误，抛出错误
        return throwError(error);
      })
    );
  }
  // 刷新令牌并重试请求
  private refreshTokenAndRetry(req: HttpRequest, next: HttpHandler): Observable> {
    // 通过Observable执行异步刷新令牌操作
    return this.refreshToken().pipe(
      switchMap(() => {
        // 刷新令牌成功后，重试原始请求
        const token = localStorage.getItem('access_token');
        const authReq = req.clone({
          setHeaders: { Authorization: `Bearer ${token}` }
        });
        return next.handle(authReq);
      })
    );
  }
  // 异步刷新令牌操作，实际应根据后端实现
  private refreshToken(): Observable {
    // 这里应该调用后端刷新令牌的接口
    // 返回一个Observable，表示刷新令牌的异步操作
    // 示例：return this.http.post('refresh-token-url', {});
    return new Observable(observer => {
      // 模拟异步操作
      setTimeout(() => {
        // 刷新令牌成功
        localStorage.setItem('access_token', 'new-token');
        observer.next();
        observer.complete();
      }, 2000);
    });
  }
}

typescript
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './path-to-token-interceptor';
@NgModule({
  imports: [HttpClientModule],
  providers: [
    // 添加拦截器到HTTP_INTERCEPTORS提供者数组
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
  ],
})
export class AppModule { }