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操作

angular4 httpclient拦截器的更多相关文章

  1. 从一个舒服的姿势插入 HttpClient 拦截器技能点

    马甲哥继续写一点大前端,阅读耗时5 minute,行文耗时5 Days 今天我们来了解一下如何拦截axios请求/响应? 这次我们举一反三,用一个最舒适的姿势插入这个技能点. axios是一个基于 p ...

  2. Angular4---认证---使用HttpClient拦截器,解决循环依赖引用的问题

    在angular4 项目中,每次请求服务端需要添加头部信息AccessToken作为认证的凭据.但如果在每次调用服务端就要写代码添加一个头部信息,会变得很麻烦.可以使用angular4的HttpCli ...

  3. Apache httpclient拦截器对请求进行签名

    Apahce httpclient 提供HttpRequestInterceptor和HttpResponseInterceptor两种拦截器分别处理请求和响应数据,下面讲一下如何对http请求进行拦 ...

  4. Spring Boot使用过滤器和拦截器分别实现REST接口简易安全认证

    本文通过一个简易安全认证示例的开发实践,理解过滤器和拦截器的工作原理. 很多文章都将过滤器(Filter).拦截器(Interceptor)和监听器(Listener)这三者和Spring关联起来讲解 ...

  5. 分布式系统登录功能拦截器的实现以及cookie的共享问题(利用cookie实现session在分布式系统的共享)

    当我们的网站采用分布式部署系统时,每个子系统拥有自己独立的session,如果不实现session共享,当用户切换系统访问的时候,会不停的提示登录,这对于用户体验是非常不好的.因此对于多个子系统的的访 ...

  6. angular cli http请求封装+拦截器配置+ 接口配置文件

    内容:接口配置文件.http请求封装 .拦截器验证登录 1.接口配置文件 app.api.ts import { Component, OnInit } from '@angular/core'; / ...

  7. 6. ModelDriven拦截器、Preparable 拦截器

    1. 问题 Struts2 的 Action 我们将它定义为一个控制器,但是由于在 Action 中也可以来编写一些业务逻辑,也有人会在 Action 输入业务逻辑层. 但是在企业开发中,我们一般会将 ...

  8. springmvc的拦截器

    什么是拦截器                                                         java里的拦截器是动态拦截action调用的对象.它提供了一种机制可以使 ...

  9. Struts的拦截器

    Struts的拦截器 1.什么是拦截器 Struts的拦截器和Servlet过滤器类似,在执行Action的execute方法之前,Struts会首先执行Struts.xml中引用的拦截器,在执行完所 ...

随机推荐

  1. MySQL性能调优与架构设计(简朝阳)

    https://www.cnblogs.com/crazylqy/category/625963.html

  2. mysql 查询参数尾部有空格时被忽略

    最近再使用mysql时,无意见发现,当我查询参数尾部输入若干个空格时,依然可以查出和不加空格相同的结果,像这样 select * from wa where name='be ' 等同于 select ...

  3. 七个开源的 Spring Boot 前后端分离项目,一定要收藏!

    前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年 ...

  4. 使用gcc不同选项来编译查看中间生成文件

    gcc编译C程序的总体流程如下图 用到的命令如下: .c---> .i gcc -E hello.c .c--->.s gcc -S hello.c .c--->.o gcc -c ...

  5. linux文件系统分区、格式化、挂载、卷标挂载、永久挂载

    思想不放松你的行为就不会放松,你的行为放松了,说明你的思想放松了.

  6. PTA A1009&A1010

    第五天 A1009 Product of Polynomials (25 分) 题目内容 This time, you are supposed to find A×B where A and B a ...

  7. MyBatis 3.5.2 新特性介绍

    1.MyBatis 最新版本 3.5.2 发布 MyBatis最新版本是:3.5.2,发布时间是:2019年7月15日 2.MyBatis 3.5.2 新特征介绍 我们知道,MyBatis 是支持定制 ...

  8. Java面向对象程序设计第5章1-9

    1.面向对象的主要特征是什么? 三大特征是:封装.继承和多态. 封装:是指将某事物的属性和行为包装到对象中,这个对象只对外公布需要公开的属性和行为,而这个公布也是可以有选择性的公布给其它对象. 继承: ...

  9. [Advanced Python] 15 - "Metaclass": ORM

    From: 使用元类 动态创建类 与静态语言最大的不同,就是函数和类的定义,不是编译时定义的,而是运行时动态创建的. 一 .type()动态创建 我们说class的定义是运行时动态创建的: 而创建cl ...

  10. 关闭vue的eslint代码检测和WebStorm的代码检测

    1. 在vue项目中 bulid > webpack.base.conf.js 中: 如图,在rules规则中有一条规则是校验代码的,也就是红框2那行,要取消可以直接注释掉这行,或者把红框1的函 ...