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? ...
随机推荐
- 005-Symbol、Proxy、Reflect
1.Symbol:http://es6.ruanyifeng.com/#docs/symbol 2.Proxy:http://es6.ruanyifeng.com/#docs/proxy Proxy ...
- mac截屏
shift+command+3 : 截全屏 shift+command+4 : 出现十字架的坐标图标,画框截图
- HDU1506: Largest Rectangle in a Histogram(最大子矩阵,好题动态优化左右边界)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1506 刚开始没考虑时间复杂度,直接敲了,直接tle了,之后没有思路,然后看题解,看见大神写的优化非常棒. ...
- java 小数转百分比
NumberFormat percent = NumberFormat.getPercentInstance(); percent.setMaximumFractionDigits(2); //保留多 ...
- ExtJS + fileuploadfield实现文件上传
后台服务端接收文件的代码: /** * 后台上传文件处理Action */ @RequestMapping(value = "/uploadFile", method=Reques ...
- cmd 命令 记忆
1,“开始”—>“运行”,输入cmd,回车.<或 win+R> 2,出现“命令提示符”的窗口,一般情况下是 C:\Documents and Settings\Administrat ...
- APDU指令返回码及其代表含义
9000 正常 成功执行6200 警告 信息未提供6281 警告 回送数据可能出错6282 警告 文件长度小于Le6283 警告 选中的文件无效6284 警告 FCI格式与P2指定的不符6300 警告 ...
- UEFI引导修复
一.用bcbboot自动修复 我们建议大家启动64位8PE,用它带的bcdboot来修复. (一)指定esp分区修复 环境为64位8PE,bios/uefi启动进入下都可以 1.启动64位8PE,并用 ...
- Linux 下的 core dump
core dump 的基本概念 当一个进程要异常终止时 ,可以选择把进程的用户空间内存数据全部保存到磁盘上 ,文件名通常是 core, 这叫做 Core Dump.通常情况下,core文件会 ...
- 2062326 齐力锋 实验四《Java面向对象程序设计Android开发》实验报告
北京电子科技学院(BESTI) 实 验 报 告 课程: 程序设计与数据结构 班级: 1623 姓名: 齐力锋 学号: 20162326 成绩: 指导教师: 娄嘉鹏/王志强 实验日期: 2017年5 ...