vue/axios请求拦截
import axios from 'axios';//引入axios依赖
import { Message } from 'element-ui';
import Cookies from 'js-cookie'; //引入cookie操作依赖
import router from '@/router/index'//引入路由对象
axios.defaults.timeout = 5000;
axios.defaults.baseURL =''; //http request 封装请求头拦截器
axios.interceptors.request.use(
config => {
var token = ''
if(typeof Cookies.get('user') === 'undefined'){
//此时为空
}else {
token = JSON.parse(Cookies.get('user')).token
}//注意使用的时候需要引入cookie方法,推荐js-cookie
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/json'
}
if(token != ''){
config.headers.token = token;
}
return config;
},
error => {
return Promise.reject(err);
}
); //http response 封装后台返回拦截器
axios.interceptors.response.use(
response => {
//当返回信息为未登录或者登录失效的时候重定向为登录页面
if(response.data.code == 'W_100004' || response.data.message == '用户未登录或登录超时,请登录!'){
router.push({
path:"/",
querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
})
}
return response;
},
error => {
return Promise.reject(error)
}
) /**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/ export function fetch(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
} /**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/ export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封装导出Excal文件请求
* @param url
* @param data
* @returns {Promise}
*/ export function exportExcel(url,data = {}){
return new Promise((resolve,reject) => {
axios({
method: 'post',
url: url, // 请求地址
data: data, // 参数
responseType: 'blob' // 表明返回服务器返回的数据类型
})
.then(response => {
resolve(response.data);
let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});
let fileName = "订单列表_"+Date.parse(new Date())+".xls" ;
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
}
},err => {
reject(err)
})
})
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/ export function patch(url,data = {}){
return new Promise((resolve,reject) => {
axios.patch(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
} /**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/ export function put(url,data = {}){
return new Promise((resolve,reject) => {
axios.put(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
vue/axios请求拦截的更多相关文章
- vue 路由拦截、axios请求拦截
路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...
- vue axios请求/响应拦截器
// main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...
- vue中前端处理token过期的方法与axios请求拦截处理
在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...
- Vue添加请求拦截器
一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...
- 10. vue axios 请求未完成时路由跳转报错问题
axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...
- token回话保持,axios请求拦截和导航守卫以及token过期处理
1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...
- axios请求,拦截器的使用
1. axios 创建请求 import axios from 'axios' import {Message} from 'element-ui' import router from " ...
- vue中 请求拦截 响应拦截设置
第一,在项目的src中新建http.js文件,将以下代码复制进去 import axios from 'axios' import { Message, Loading } from 'element ...
- vue axios 请求 https 的特殊处理
最近遇到自签发的CA证书,在前端axios请求https请求时,无法自动加载证书. 解决方法:将无法加载的请求在浏览器新窗口手动加载,选择继续连接. 重新加载,问题解决. 根本原因:因为自签发证书,浏 ...
随机推荐
- Maximum Entropy Model(最大熵模型)初理解
0,熵的描述 熵(entropy)指的是体系的混沌的程度(可也理解为一个随机变量的不确定性),它在控制论.概率论.数论.天体物理.生命科学等领域都有重要应用,在不同的学科中也有引申出的更为具体的定义, ...
- ATA接口寄存器描述
ATA接口寄存器描述 .ATA接口的三种数据传输方式 位. )MDMA(Multiword DMA)传输,用于数据传输.ATA主机控制器向ATA设备下达MDMA传输命令后,等待设备向主机发送DMARQ ...
- Jquery ajaxfileupload.js结合.ashx文件实现无刷新上传
先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
- Linux显示邮件状态等信息
Linux显示邮件状态等信息 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ finger -l Login: youhaidong Name: youhaid ...
- 谈下spring下的 aop日志记录
在我们开发当中 我们需要对系统用户行为和 系统异常信息有个统一记录 以便后期的 用户行为分析和bug修复 当我们有这个需求时 我们的通常采取方式很多 1.比如我们定义一个规范 开发一个接口 ...
- 2016弱校联盟十一专场10.3 We don't wanna work!
能把 not working now 写成 not working hard now 还查一晚上也是没谁了 我的做法是维护两个set 分别是前20% 和后80% #include<iostrea ...
- 阿里云ECS+CentOS 7.0+Docker+Redmine环境搭建
前言 搭建Redmine环境可以选择使用分别安装Ruby+Rails+Redmine+MySQL的方式, 但是过程中需要解决各种扰人的依赖问题.Docker为我们提供的Plan B,方便,快捷. 安装 ...
- springboot集成Actuator
Actuator监控端点,主要用来监控与管理. 原生端点主要分为三大类:应用配置类.度量指标类.操作控制类. 应用配置类:获取应用程序中加载的配置.环境变量.自动化配置报告等与SpringBoot应用 ...
- 1.Docker是什么?
Docker官网是这样解释的: Docker is the company driving the container movement and the only container platform ...
- Listener监听器生命周期
一.Listener生命周期 listener是web三大组件之一,是servlet监听器,用来监听请求,监听服务端的操作. listener分为:(都是接口类,必须实现相应方法) 1.生命周期监听器 ...