react use axios拦截器
import axios from 'axios';
improt Promise from 'es6-promise'; Promise.polyfill(); const axiosService = axios.create(); axiosService.defaults.timeout = 5000;
axiosService.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; axiosService.interceptors.request.use(
(config) => {
if (config.data && config.data.$skipAuthHandler) {
config.$skipAuthHandler = true;
delete config.data.$skipAuthHandler;
}
if (config.params && config.params.$skipAuthHandler) {
config.$skipAuthHandler = true;
delete config.params.$skipAuthHandler;
}
config.headers.Authorization = getAuthorization();
return config;
},
(error) => {
return Promise.reject(error)
}
); axiosService.interceptors.response.use(
(response) => {
return response;
},
(error) => {
const err = error.response;
if (err.status === 401 && !! config.data && !config.data.$skipAuthHandler) {
user.clear();
window.location = '/unauthorization';
}
return Promise.reject(error);
}
); export default axiosService;
update:
import axios from 'axios';
import {toastr} from "react-redux-toastr"; //import LoginUser from "service/login-service/LoginUser"; Promise.polyfill(); const axiosService = axios.create();
//const _loginUser = new LoginUser(); axiosService.defaults.timeout = 5000;
axiosService.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; axiosService.interceptors.request.use(
(config) => {
if (config.data && config.data.$skipAuthHandler) {
config.$skipAuthHandler = true;
delete config.data.$skipAuthHandler;
}
if (config.params && config.params.$skipAuthHandler) {
config.$skipAuthHandler = true;
delete config.params.$skipAuthHandler;
}
//config.headers.Authorization = _loginUser.getAuthorization();
return config;
},
(error) => {
return Promise.reject(error)
}
); axiosService.interceptors.response.use(
(response) => {
return response;
},
(error) => {
const err = error.response;
if (err.status === 401 && !! err.config && !err.config.$skipAuthHandler) {
//_loginUser.clear();
window.location = '/unauthorization';
}
toastr.error(err.data.message);
return Promise.reject(error);
}
); export default axiosService;
通用请求服务:
import axiosService from 'axiosService';
improt Promise from 'es6-promise'; Promise.polyfill(); export default class RequestService {
axiosRequest(param) {
return new Promise((resolve, reject) => {
axiosService.request({
url: param.url || '',
method: param.method || 'GET',
responseType: param.responseType || 'json',
data: param.data || null,
params: param.params || '',
}).then(res => {
typeOf resolve === 'function' && resolve(res);
}).catch(error => {
typeOf reject === 'function' && reject(error);
})
})
}
}
react use axios拦截器的更多相关文章
- 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +
(1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- axios拦截器搭配token使用
在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...
- axios拦截器的使用方法
很多时候我们需要在发送请求和响应数据的时候做一些页面处理,比如在请求服务器之前先判断以下用户是登录(通过token判断),或者设置请求头header,或者在请求到数据之前页面显示loading等等,还 ...
- vue导航守卫和axios拦截器的区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...
- Axios拦截器配置
Axios 拦截器的配置如下 分三块:基础配置.请求之前拦截.响应之前拦截 发送所有请求之前和操作服务器响应数据之前对这种情况过滤. http request 请求拦截器 每次发送请求之前判断是否存在 ...
- 交互-通过axios拦截器添加token认证
通过axios拦截器添加token认证 一.通过axios请求拦截器添加token,保证拥有获取数据的权限 通常访问接口需要相关权限,通常是需要携带token如下所示 那如何在请求头中添加token? ...
随机推荐
- Linux的进程/线程通信方式总结(转)
Linux系统中的进程通信方式主要以下几种: 同一主机上的进程通信方式 * UNIX进程间通信方式: 包括管道(PIPE), 有名管道(FIFO), 和信号(Signal) * System V进程通 ...
- (转载)undo表空间
对Oracle数据库UNDO表空间的监控和管理是我们日常最重要的工作之一,UNDO表空间通常都是Oracle自动化管理(通过undo_management初始化参数确定):UNDO表空间是用于存储DM ...
- 在 Mac OS 上编译 OBS
本文转自:在 Mac OS 上编译 OBS | www.samirchen.com 安装环境 第一步,做准备工作,安装编译 OBS 所需要的环境,流程如下: // 给当前用户添加 /usr/local ...
- CSS3:布局display属性的flex(弹性布局)
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- python的正则表达式捕获组命名问题
- 华为交换机S5700系列配置镜像端口(M:N)
配置本地端口镜像组网图(M:N) 组网需求 如图所示,某公司研发一部.研发二部和市场部通过Switch与外部Internet通信,监控设备Server1.Server2与Switch直连. 现在希望将 ...
- ARM协处理器CP15寄存器详解【转】
本文转载i自;https://blog.csdn.net/gameit/article/details/13169405 用于系统存储管理的协处理器CP15 MCR{cond} copro ...
- Python 面向对象的三大特性:封装,继承,多态
# 面向对象的三大特性:封装,继承,多态 # 继承的影响:资源的继承,资源的使用,资源的覆盖,资源的累加 # 资源的继承,在Python中的继承是指能使用父类的资源,而不是说在子类也复制一份父类代码到 ...
- AI理论学习笔记(一):深度学习的前世今生
AI理论学习笔记(一):深度学习的前世今生 大家还记得以深度学习技术为基础的电脑程序AlphaGo吗?这是人类历史中在某种意义的第一次机器打败人类的例子,其最大的魅力就是深度学习(Deep Learn ...
- 初识 Zookeeper
云计算越来越流行的今天,单一机器处理能力已经不能满足我们的需求,不得不采用大量的服务集群.服务集群对外提供服务的过程中,有很多的配置需要随时更新,服务间需要协调工作,这些信息如何推送到各个节点?并且保 ...