# 请求拦截 insterceptor
# 1. 新建 interceptor 文件
ng g interceptor default
1
# 2. 编写 /src/app/core/net/default.interceptor.ts
参考:
HttpRequest (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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
← http请求 服务 Service →