说明

基于angular拦截器实现，接口报401错误时（一般情况下是token过期了）自动刷新token，避免用户在长时间未关闭页面时导致的授权过期问题

代码

  1. import {
  2.   HttpErrorResponse,
  3.   HttpEvent,
  4.   HttpHandler,
  5.   HttpInterceptor,
  6.   HttpRequest
  7. } from "@angular/common/http";
  8. import {
  9.   Injectable
  10. } from "@angular/core";
  11. import {
  12.   throwError,
  13.   Observable,
  14.   BehaviorSubject,
  15.   of
  16. } from 'rxjs';
  17. import {
  18.   catchError,
  19.   filter,
  20.   take,
  21.   switchMap,
  22.   mergeMap,
  23.   finalize
  24. } from 'rxjs/operators';
  25. import {
  26.   serviceType
  27. } from "src/app/core/services/data-inquire/cus-type";
  28. import {
  29.   DataInquireFuncService
  30. } from "src/app/core/services/data-inquire/data-inquire-func.service";
  31. import {
  32.   ComFuncService
  33. } from "../com.func.service";
  35. @Injectable({
  36.   providedIn: 'root'
  37. })
  38. export class ServiceAuthInterceptor implements HttpInterceptor {
  39.   // 应用代码，按需修改
  40.   authToken = '';
  41.   // 排除拦截的关键字段，按需修改(高优先级)
  42.   excludeList = [
  43.     'login', 'RefreshToken'
  44.   ]
  45.   // 拦截地址的关键字段，按需修改
  46.   interceptorList = [
  47.     'geodaapi',
  48.     '192.168.3.46:6360',
  49.     '192.168.3.119:6360'
  50.   ];
  52.   private refreshTokenInProgress = false;
  53.   private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  55.   constructor(
  56.     private comFuncService: ComFuncService,
  57.     private dataInquireFuncService: DataInquireFuncService
  58.   ) { }
  60.   intercept(
  61.     req: HttpRequest<any>,
  62.     next: HttpHandler
  63.   ): Observable<HttpEvent<any>> {
  65.     // 判断是否需要拦截
  66.     if (this.excludeList.length) {
  67.       for (let i = 0; i < this.excludeList.length; i++) {
  68.         if (req.url.indexOf(this.excludeList[i]) > -1) {
  69.           return next.handle(req);
  70.         }
  71.       }
  72.     }
  74.     // 添加授权Token
  75.     req = this.addAuthToken(req);
  77.     return next.handle(req).pipe(
  78.       catchError((err: HttpErrorResponse) => {
  79.         if (err && err.status === 401) {
  80.           if (this.refreshTokenInProgress) {
  81.             return this.refreshTokenSubject.pipe(
  82.               filter(result => result !== null),
  83.               take(1),
  84.               switchMap(() => next.handle(this.addAuthToken(req)))
  85.             );
  86.           } else {
  87.             this.refreshTokenInProgress = true;
  89.             // 设置 refreshTokenSubject 为 null，这样随后的 API 将等到新的 token 被取回时才调用。
  90.             this.refreshTokenSubject.next(null);
  92.             return this.refreshToken().pipe(
  93.               switchMap((success: boolean) => {
  94.                 this.refreshTokenSubject.next(success);
  95.                 return next.handle(this.addAuthToken(req));
  96.               }),
  97.               // 当我们调用刷新 token 方法完成时，重置 refreshTokenInProgress 为 false，
  98.               // 这是为了下次 token 需要再次被刷新
  99.               finalize(() => this.refreshTokenInProgress = false)
  100.             );
  101.           }
  102.         }
  103.         throw err;
  104.       })
  105.     );
  106.   }
  108.   /**
  109.    * @description: 刷新token
  110.    * @param {*}
  111.    * @return {*}
  112.    */
  113.   refreshToken() {
  114.     // 获取用于获取新token的refreshToken值
  115.     const refreshToken = this.comFuncService.getRefreshToken();
  116.     // 通过http方法请求接口获取新的有效的token
  117.     return this.dataInquireFuncService.request(serviceType.INIT, 'login', 'refreshToken', {
  118.       params: {
  119.         refreshToken: refreshToken
  120.       }
  121.     }).pipe(mergeMap((res: any) => {
  122.       if (res && res.code === 1) {
  123.         const tokenInfo = res.data;
  124.         sessionStorage.setItem('tokenInfo', JSON.stringify(tokenInfo));
  125.         return of(true);
  126.       }
  127.       return of(false);
  128.     }))
  129.   }
  131.   /**
  132.    * @description: 添加授权Token
  133.    * @param {HttpRequest} req
  134.    * @return {*}
  135.    */
  136.   addAuthToken(req: HttpRequest<any>) {
  137.     // 获取token
  138.     this.authToken = this.comFuncService.getToken();
  139.     // 拦截追加
  140.     let authToken = null;
  141.     const requestUrl = req.url.toString();
  142.     // 循环判断，按需增加token
  143.     for (let i = 0; i < this.interceptorList.length; i++) {
  144.       const key = this.interceptorList[i];
  145.       if (requestUrl.indexOf(key) !== -1) {
  146.         authToken = 'Bearer ' + this.authToken;
  147.         break;
  148.       }
  149.     }
  150.     if (authToken) {
  151.       req = req.clone({
  152.         setHeaders: {
  153.           'Authorization': authToken
  154.         }
  155.       });
  156.     }
  157.     return req;
  158.   }
  160. }

代码解析

参考文档

  1. [译]在 Angular 中使用拦截器的方式 Top 10 | 千里
  2. RxJS之BehaviorSubject - 知乎