vue中axios使用一:axios做拦截器
转载请注明出处:
项目中用到了单点登录,依赖的公司通用的jar包,且项目为前后端分离的方式,为了管理系统的所有请求和
超时管理,用到了axios,做前端请求拦截,并做管理。
其有以下特点:
axios是请求后台资源的模块,用来请求后台资源。在项目中安装的方法为,在对应的项目路径下,后dos窗口
执行以下命令:
npm install axios
安装成功后会在项目的package.json文件中出现对象安装插件的版本:
在main.js中引用改模块:
import axios from 'axios';
开始进行拦截请求:
axios.interceptors.request.use((config) => {
console.info(config);
// 请求拦截
jsonp('/authStatus', null, (err, data) => {
console.info(data);
// 请求拦截响应的参数,判断是否会话过期
if(!data.hasLogin){
// 页面刷新跳转到登录页面
window.location.href = loginTimeOutUrl;
}
})
return config;
});
拦截请求响应数据:
Vue.prototype.$http = axios;
axios.defaults.crossDomain = true;
axios.interceptors.response.use((response) => {
if (response && response.data) {
if (response.data.status == "UNKNOWN" || response.status == 302) {
//alert("passport登录超时,刷新重新登录");
window.location.reload();
} else {
return response;
}
} else {
return response;
}
}, function (error) {
if (302 == error.response.status || error.response.status == "UNKNOWN") {
//alert("passport登录超时,刷新重新登录");
window.location.reload();
} else {
return Promise.reject(error);
}
});
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
本文参考:https://www.kancloud.cn/yunye/axios/234845
vue中axios使用一:axios做拦截器的更多相关文章
- axios 源码解析(下) 拦截器的详解
axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种: 请求拦截器 ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要 ...
- axios源码解析 - 请求拦截器
axios请求拦截器,也就是在请求发送之前执行自定义的函数. axios源码版本 - ^0.27.2 (源码是精简版) 平时在业务中会这样去写请求拦截器,代码如下: // 创建一个新的实例 var s ...
- java中过滤器(Filter)与拦截器(Interceptor )区别
过滤器(Filter) Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是设置字符集.控制权限.控制转向.做一些业务逻辑判断等.其工作 ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中发送ajax请求——axios使用详解
axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...
- 关于 Vue 中 我对中央事线管理器的(enentBus)误解
由于这段时间公司比较闲,就对vue 中的一些模糊的点做了一些加强,突然就想到了常挂在嘴边兄弟组件传值 我理解的兄弟组件的传值是可以跨理由传值的,比如我从http://localhost:8080/lo ...
- spring中的监视器,过滤器,拦截器
1.监视器 (1)首先监视器是观察者模式的实现,在我之前的博客中有关于监视器模式的解释.监视器相当于观察者 (2)我们在springMvc中最常见的监视器 ContextLoaderlistener ...
- 在struts2.3.4.1中使用注解、反射、拦截器实现基于方法的权限控制
权限控制是每一个系统都应该有的一个功能,有些只需要简单控制一下就可以了,然而有些却需要进行更加深入和细致的权限控制,尤其是对于一些MIS类系统,基于方法的权限控制就更加重要了. 用反射和自定义注解来实 ...
- Spring3中的mvc:interceptors标签配置拦截器
mvc:interceptors 这个标签用于注册一个自定义拦截器或者是WebRequestInterceptors. 可以通过定义URL来进行路径请求拦截,可以做到较为细粒度的拦截控制. 例如在配置 ...
随机推荐
- MobX入门示例
在相当长的一段时间内,Redux 都是前端开发人员作为状态管理的首先框架,如果不会 Redux,你都不好意思跟别人说自己是搞前端的. 没过多久,开发者们开始意识到,这东西虽说盛行,但它并没有传说中的那 ...
- 海思3519A 开发环境设置相关
设置板卡和虚拟机的网络参数 setenv serverip 192.168.1.107 setenv ipaddr 192.168.1.10 setenv gatewayip 192.168.1.1 ...
- Apache JMeter系列.1
最爱看统计 --01-- 简介 Apache JMeter Apache JMeter可用于测试静态和动态资源(文件,Servlet,Perl脚本,Java对象,数据库和查询,FTP服务器等)的性能. ...
- 图论 - PAT甲级 1003 Emergency C++
PAT甲级 1003 Emergency C++ As an emergency rescue team leader of a city, you are given a special map o ...
- abp记录1
1在AbpWebApplication中的的构造函数中创建abpBootstrapper 实例,在Application_Start执行AbpBootstrapper值初始化方式 2AbpBootst ...
- 如果wordpress分类只有一篇文章则直接跳转到文章页
每个项目的需求都不一样,比如最近ytkah的客户提出如果wordpress分类只有一篇文章则直接跳转到文章页,这个实现起来不会很麻烦,几行代码就能搞定,下面就来一起看看吧.打开主题的function. ...
- keller PAA-3XX/80794系列(绝压)压力传感器
一.瑞士 keller(科勒)压力传感器 keller英文版通讯协议百度网盘:提取码:fusc 广播模式:所有从机都会收到上位机信息 Broadcasting This mode of communi ...
- template_DefaultType
#include <iostream> using namespace std; template <typename T1,typename T2=int> class Te ...
- Caching POST-post是否能缓存
https://www.mnot.net/blog/2012/09/24/caching_POST One of the changes in Apple’s release of iOS6 last ...
- redux的知名ppt
https://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/20