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? ...
随机推荐
- HDU1069:Monkey and Banana(最长上升子序列的应用)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1069 这题挺简单的,给定一个箱子的长宽高,要求啰箱子,但必须保证下面箱子的长和宽必须大于上面的箱子. 一个 ...
- PAT 1095 Cars on Campus
1095 Cars on Campus (30 分) Zhejiang University has 8 campuses and a lot of gates. From each gate we ...
- 3 TensorFlow入门之识别手写数字
------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...
- IOS中快速集成短信SDK验证开发(SMSSDK),IOS开发中如何设置手机验证码
[转载请注明出处] sdk是别人的,我只是下载来集成一下. smssdk下载网站:http://www.mob.com/(也有其他很多网站有类似SDK,譬如https://www.juhe.cn/等等 ...
- wechat多开
右键wechat查看属性,找到目标(wechat的执行路径),复制 然后在桌面新建文档,输入下面命令,想多开几个就复制几行 start 复制的目标 另存为bat文件,所有文件类型 双击运行
- URAL - 1902 Neo-Venice
题目: Mars was the first planet colonized by humans. After a long terraforming process its appearance ...
- SpringBoot 表单验证
Valid 注解 JSR 303 校验框架注解类: • @NotNull 注解元素必须是非空 • @Null 注解元素必须是空 • @Digits 验证数字构成是否合法 • @Future 验证是否在 ...
- Servlet容器初始化IOC容器
<!-- ServletContext参数,配置Ioc容器的xml文件名 --> <context-param> <param-name>contextConfig ...
- Makefile文件应用——simple项目
学习资料 本文主要参考资料:驾驭Makefile(李云).pdf 原理 (1)最基本的语法 targets: prerequisites command targets是目标,prerequisite ...
- DRBD分布式块设备复制
一. DRBD介绍 1.1.数据镜像软件DRBD介绍分布式块设备复制(Distributed Relicated Block Deivce,DRBD),是一种基于软件.基于网络的块复制存储解决方案,主 ...