# 请求拦截 insterceptor

# 1. 新建 interceptor 文件

ng g interceptor default
1

# 2. 编写 /src/app/core/net/default.interceptor.ts

参考:

拦截请求和响应 (opens new window)

HttpRequest (opens new window)

RxJS库 (opens new window)

RxJS官网 (opens new window)

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse, HttpResponse } from '@angular/common/http';

import { Observable, of, EMPTY } from 'rxjs';
import { catchError, mergeMap } from 'rxjs/operators';

/** Pass untouched request through to the next request handler. */
@Injectable()
export class DefaultInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 不满足条件 则不进行拦截
    if (false) { return EMPTY; }
    // 拦截
    return next.handle(req).pipe(
      mergeMap(event => {
        // 响应拦截
        if (event instanceof HttpResponse) {
          if ('处理返回的错误') {
            return this.handleDataError(event);
          }
          if ('重新请求') {
            console.log('jwt invalid');
            // 重置 JWT token
            const update: {
              // headers?: HttpHeaders;
              reportProgress?: boolean;
              // params?: HttpParams;
              responseType?: 'arraybuffer' | 'blob' | 'text' | 'json';
              withCredentials?: boolean;
              body?: T;
              method?: string;
              url?: string;
              setHeaders?: {};
              setParams?: {};
            } = {};
            const authReq = req.clone(update);
            return next.handle(authReq);
          }
        }
        return of(event);
      }),
      catchError((err: HttpErrorResponse) => this.handleHttpError(err))
      // catchError((err: HttpErrorResponse) => {
      //   return this.handleHttpError(err);
      // })
    );
  }

  // 处理数据错误
  private handleDataError(event: HttpResponse<any> | HttpErrorResponse): Observable<any> {
    if (event instanceof HttpResponse) {
      // 处理 错误
    }
    // return of(event);
    throw event;
  }

  // 处理http错误
  private handleHttpError(event: HttpResponse<any> | HttpErrorResponse): Observable<any> {
    if (event.status === 200) {
      if (event instanceof HttpResponse) {
        throw event.body;
      }
    }

    confirm(`Http error(${event.status}`);
    throw event;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

# 3. 在 app.module.ts 根模块 注入 拦截器 依赖

// 请求拦截器
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { DefaultInterceptor } from '@core/'; // DefaultInterceptor 由 core.module.ts 模块统一导出
// 拦截器数组 可加入多个 拦截器
const INTERCEPTOR_PROVIDES = [
  { provide: HTTP_INTERCEPTORS, useClass: DefaultInterceptor, multi: true },
];

@NgModule({
  declarations: [],
  imports: [],
  providers: [ INTERCEPTOR_PROVIDES ],
  bootstrap: [AppComponent]
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
上次更新: 2022-11-29 16:59:20(UTC +8)