用了很长时间vue-resource，最近思考$http发送请求时，如何自动上传token、自动处理token非法时页面跳转时，才发现vue-resource竟然有拦截器（interceptors）机制，可以完美地解决这个问题。
代码很简单，不做过多解释。
<!DOCTYPE html>
<!--
vue-resource拦截器测试页面
http://wallimn.iteye.com
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue-resource.interceptors</title>
</head>
<body class="main">
<div id="app">
</div>
<script type="text/javascript" src="../res/lib/vue.js"></script>
<script type="text/javascript" src="../res/lib/vue-resource.js"></script>
<script type="text/javascript">
//拦截器使用示例
//注册拦截器
Vue.http.interceptors.push(function(request, next) {
var token = sessionStorage.getItem('token');
if(token){
//不知是Bearer;还是Bearer半角空格，网上两种写法都有。
request.headers.set('Authorization','Bearer;' + token);
//下面这个方法不正确。浏览器控制台或后台服务程序均无法看到传递值
//request.headers.Authorization = 'Bearer;' + token;
}
console.log("拦截器输出，请求参数：",request.body?request.body:request.params);
next(function(response){
console.log("拦截器输出，返回状态：",response.status);
if (response.status === 401) {
window.location.href = '../public/login.html';
}
});
});
// Vue实例化
var doit = new Vue({
el:'#app',
data: {},
methods: {
//测试拦截器，服务正常响应
testinterceptors: function(){
this.$http.get("../api/02/test/version").then(function(res){
;
});
},
//测试发生异常页面跳转，后台服务抛出异常
testexception: function(){
this.$http.get("../api/02/test/exception").then(function(res){
;
});
}
}
});
doit.testinterceptors();
</script>
</body>
</html>
分享到：
相关推荐
vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件，提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和Vue组件实例方法。
作用：发送http请求 特点： 1 体积小 vue-resource非常小巧，在压缩以后只有大约12KB，服务端...拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。
主要介绍了Vue添加请求拦截器及vue-resource 拦截器使用,需要的朋友可以参考下
下面小编就为大家带来一篇Vue-resource拦截器判断token失效跳转的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
可以使用这个vue-resource.js在vue应用中发起get post 等请求
使用vue-resource，设置头信息： Vue.http.interceptors.push((request, next)...以上这篇vue-resource拦截器设置头信息的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
本篇文章主要介绍了vue-resource 拦截器（interceptor）的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue.js 与 vue-resource.js 下载,学习vue的童鞋可以使用.
Vue-Resource-Mock此软件包不需要Vue的特定版本，但需要vue-resource。 在撰写本文时，它对Vue / Vue2均适用。 复制和Vue-Resource-Mock此软件包不需要Vue的特定版本，而需要vue-resource。 在撰写本文时，它对Vue /...
本篇文章主要介绍了vue-resource 拦截器使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-resource就像jQuery里的$.ajax，用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据...
Vue打包下载,包含Vue.js,vue-resource.js,Axios.js 目前最新版本....
前端项目-vue-resource,Vue.js的Web请求服务
基于vue-cli脚手架，VUE Vue-Router Vue-Resource Vuex技术栈练习demo，需要有一定的html css js vue npm 基础。 安装： npm install npm install vue-router -g npm install vue-resource -g npm install vuex -g ...
使用Vue-Grid-Layout实现自定义工作台
vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了...
SpringBoot实现vue-admin-template登录接口 vue-admin-template vue-admin-template是一个简化版的vue-element-admin的模板， 适合vue用来做项目的搭建，虽然官方文档以及花裤衩前端大佬 在博客中已经将大部分的疑难...