axios实现类似form传值的格式,以及实现拦截器功能,response拦截实现权限判断
import axios from 'axios'
import Qs from 'qs' // 超时设置
const service = axios.create({
transformRequest: [function (data) {
data = Qs.stringify(data);
return data;
}],
// 请求超时时间
timeout: 5000 ,
}); //对,就是用qs对aixos进行全局设置,之后在首页引入这个封装好的aixos就好了,传给后台都是类似form的形式
2、这里补充一下,用拦截器给请求头加token
// http request 拦截器
// 每次请求都为http头增加Authorization字段,其内容为token
service.interceptors.request.use(
config => {
let cancel
config.cancelToken = new CancelToken(function executor(c) {
cancel = c;
})
var token = Cookies.get('token');
config.headers.token = token
if(token != undefined){
Auth.setLoginStatus()
}
stopRepeatRequest(config.url, cancel)
return config
},
err => {
return Promise.reject(err);
}
);
3、针对返回来的数据进行拦截,这里进行权限判断,没权限或者页面不对,就跳到404
// http response 拦截器
// 针对响应代码确认跳转到对应页面
service.interceptors.response.use(
response => {
for( let i = 0; i < requestList.length; i++){
if(requestList[i] == response.config.url){
// 注意,不能保证500ms必定执行,详情请了解JS的异步机制
requestList.splice(i,1)
//异步删除有问题
// setTimeout(function(){
// requestList.splice(i,1)
// console.log(requestList,'执行删除了=================')
// }, 100) break
}
}
return Promise.resolve(response.data)
},
error => {
if(axios.isCancel(error)){
return Promise.reject("Ajax Abort: 该请求在axios拦截器中被中断")
} else if (error.response) {
switch (error.response.status) {
case 401:
router.push('error/401');
case 403:
router.push('error/403');
default:
Message({
message: `服务器错误!错误代码:${error.response.status}`,
type: 'error'
})
}
return Promise.reject(error.response.data)
}
}
);
axios实现类似form传值的格式,以及实现拦截器功能,response拦截实现权限判断的更多相关文章
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
- 使用Typescript重构axios(十四)——实现拦截器
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- axios 源码解析(下) 拦截器的详解
axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种: 请求拦截器 ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要 ...
- 利用Struts拦截器限制上传图片的格式和大小
在这之前 Struts的一个核心功能就是大量的拦截器,既然是框架,那么自然也就贴心地为我们准备好了各种常用的功能,比如这里即将讨论的如何限制上传图片的格式和大小.那么既然是使用Struts已经写好的拦 ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- axios请求、返回拦截器
1.http 请求拦截器 axios.interceptors.request.use(function(config){ //在发送请求之前做些什么 return config }), functi ...
- vue axios拦截器介绍
关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...
随机推荐
- 一、Servlet之14道面试题
1.什么是Servlet Servlet是用Java编写的服务端程序,它与协议和平台无关,运行于支持Java的应用服务器中,Java Servlet可以动态的扩展服务器的能力,并采用请求-响应模 ...
- linux修改键盘按键
我的电脑:Fedora-19 $ uname -a Linux localhost.localdomain 3.11.10-200.fc19.i686 #1 SMP Mon Dec 2 20:48:2 ...
- video-player
1. VLC 2. MPlayer 3. FFmpeg 4. 显示媒体信息 5. 视频播放器软件比较 1. VLC https://www.videolan.org/vlc/ https://en.w ...
- rsa免密钥登陆
#第一步 生成密钥,一路回车就行 ssh-keygen -t rsa #第二步 将密钥拷贝到目标服务器上,注意双引号 ssh-copy-id -i ~/.ssh/id_rsa.pub "ro ...
- mysql#自定义序列
原文 mysql主键不用自增数字的时候,可以参考如下方式,我抄来的. -- 创建公共的序列表 DROP TABLE IF EXISTS t_common_sequence; CREATE TABLE ...
- 【Go语言系列】2.1、Go语言基本程序结构:注释
注释在程序中的作用是对程序进行注解和说明,便于对源码的阅读.在源码中适当地添加注释,能够提高源码的可读性. Go语言的注释主要分成两类,分别是单行注释和多行注释. 单行注释: //单行注释 多行注释: ...
- 黑客的探路狗ReconDog网站信息探测收集工具
工具下载地址:http://pan.baidu.com/s/1pLJnBLL 密码:gqlz OR https://github.com/UltimateHackers/ReconDog 下载并 ...
- [AHK]输入法状态提示,中文状态提示“中”,英文状态提示“EN”[转]
测试中发现使用小鹤双拼,如果不是使用shift切换中英文,效果不理想,留下此文章做个标记 https://www.autoahk.com/archives/8755 输入法状态提示,中文状态提示&qu ...
- LoadRunner监控Linux系统
需要下载3个包: 地址链接:链接:https://pan.baidu.com/s/1lltAa6JnjJ7Mr88duixUSQ 密码:5yiw(1)rsh-0.17-14.i386.rpm (2) ...
- 51nod 1441:士兵的数字游戏
1441 士兵的数字游戏 题目来源: CodeForces 基准时间限制:4 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 取消关注 两个士兵正在玩一个游戏,游戏开始的时 ...