用了很长时间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或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http来发送GET、POST等类型的请求，还提供了拦截器(interceptor)功能，可以在请求前后附加一些行为，例如显示加载指示器。它还支持RESTful风格的API...
使用vue-resource，设置头信息： Vue.http.interceptors.push((request, next)...以上这篇vue-resource拦截器设置头信息的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。