1.创建服务:
InterceptorService.ts
import { Injectable } from '@angular/core';
import { HttpEvent,HttpInterceptor,HttpHandler,HttpRequest,HttpResponse} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
import { catchError } from 'rxjs/operators';
import { mergeMap } from 'rxjs/operators';
@Injectable()
export class InterceptorService implements HttpInterceptor{
intercept(req:HttpRequest<any>,next:HttpHandler):Observable<HttpEvent<any>>{
const authReq = req.clone({
url: (req.url + '&token=ujusaruu19') //对任意请求的url添加token参数
});
return next.handle(authReq).pipe(mergeMap((event: any) => {
if (event instanceof HttpResponse && event.status != 200) {
return ErrorObservable.create(event);
}
return Observable.create(observer => observer.next(event)); //请求成功返回响应
}),
catchError((res: HttpResponse<any>) => { //请求失败处理
switch (res.status) {
case 401:
break;
case 200:
console.log('业务错误');
break;
case 404:
break;
case 403:
console.log('业务错误');
break;
}
return ErrorObservable.create(event);
}));
}
}
2.导入提供器中,app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {InterceptorService} from "./interceptor.service";
import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
import { TestComponent } from './test/test.component';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
{provide:HTTP_INTERCEPTORS,useClass:InterceptorService,multi:true}
],
bootstrap: [AppComponent]
})
export class AppModule { }
3.结束,在组件中使用httpClient请求会自动拦截,拦截处理在InterceptorService.ts操作