angular4 httpclient拦截器
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拦截器的更多相关文章
- 从一个舒服的姿势插入 HttpClient 拦截器技能点
马甲哥继续写一点大前端,阅读耗时5 minute,行文耗时5 Days 今天我们来了解一下如何拦截axios请求/响应? 这次我们举一反三,用一个最舒适的姿势插入这个技能点. axios是一个基于 p ...
- Angular4---认证---使用HttpClient拦截器,解决循环依赖引用的问题
在angular4 项目中,每次请求服务端需要添加头部信息AccessToken作为认证的凭据.但如果在每次调用服务端就要写代码添加一个头部信息,会变得很麻烦.可以使用angular4的HttpCli ...
- Apache httpclient拦截器对请求进行签名
Apahce httpclient 提供HttpRequestInterceptor和HttpResponseInterceptor两种拦截器分别处理请求和响应数据,下面讲一下如何对http请求进行拦 ...
- Spring Boot使用过滤器和拦截器分别实现REST接口简易安全认证
本文通过一个简易安全认证示例的开发实践,理解过滤器和拦截器的工作原理. 很多文章都将过滤器(Filter).拦截器(Interceptor)和监听器(Listener)这三者和Spring关联起来讲解 ...
- 分布式系统登录功能拦截器的实现以及cookie的共享问题(利用cookie实现session在分布式系统的共享)
当我们的网站采用分布式部署系统时,每个子系统拥有自己独立的session,如果不实现session共享,当用户切换系统访问的时候,会不停的提示登录,这对于用户体验是非常不好的.因此对于多个子系统的的访 ...
- angular cli http请求封装+拦截器配置+ 接口配置文件
内容:接口配置文件.http请求封装 .拦截器验证登录 1.接口配置文件 app.api.ts import { Component, OnInit } from '@angular/core'; / ...
- 6. ModelDriven拦截器、Preparable 拦截器
1. 问题 Struts2 的 Action 我们将它定义为一个控制器,但是由于在 Action 中也可以来编写一些业务逻辑,也有人会在 Action 输入业务逻辑层. 但是在企业开发中,我们一般会将 ...
- springmvc的拦截器
什么是拦截器 java里的拦截器是动态拦截action调用的对象.它提供了一种机制可以使 ...
- Struts的拦截器
Struts的拦截器 1.什么是拦截器 Struts的拦截器和Servlet过滤器类似,在执行Action的execute方法之前,Struts会首先执行Struts.xml中引用的拦截器,在执行完所 ...
随机推荐
- MySQL性能调优与架构设计(简朝阳)
https://www.cnblogs.com/crazylqy/category/625963.html
- mysql 查询参数尾部有空格时被忽略
最近再使用mysql时,无意见发现,当我查询参数尾部输入若干个空格时,依然可以查出和不加空格相同的结果,像这样 select * from wa where name='be ' 等同于 select ...
- 七个开源的 Spring Boot 前后端分离项目,一定要收藏!
前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年 ...
- 使用gcc不同选项来编译查看中间生成文件
gcc编译C程序的总体流程如下图 用到的命令如下: .c---> .i gcc -E hello.c .c--->.s gcc -S hello.c .c--->.o gcc -c ...
- linux文件系统分区、格式化、挂载、卷标挂载、永久挂载
思想不放松你的行为就不会放松,你的行为放松了,说明你的思想放松了.
- PTA A1009&A1010
第五天 A1009 Product of Polynomials (25 分) 题目内容 This time, you are supposed to find A×B where A and B a ...
- MyBatis 3.5.2 新特性介绍
1.MyBatis 最新版本 3.5.2 发布 MyBatis最新版本是:3.5.2,发布时间是:2019年7月15日 2.MyBatis 3.5.2 新特征介绍 我们知道,MyBatis 是支持定制 ...
- Java面向对象程序设计第5章1-9
1.面向对象的主要特征是什么? 三大特征是:封装.继承和多态. 封装:是指将某事物的属性和行为包装到对象中,这个对象只对外公布需要公开的属性和行为,而这个公布也是可以有选择性的公布给其它对象. 继承: ...
- [Advanced Python] 15 - "Metaclass": ORM
From: 使用元类 动态创建类 与静态语言最大的不同,就是函数和类的定义,不是编译时定义的,而是运行时动态创建的. 一 .type()动态创建 我们说class的定义是运行时动态创建的: 而创建cl ...
- 关闭vue的eslint代码检测和WebStorm的代码检测
1. 在vue项目中 bulid > webpack.base.conf.js 中: 如图,在rules规则中有一条规则是校验代码的,也就是红框2那行,要取消可以直接注释掉这行,或者把红框1的函 ...