用了很长时间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>
分享到：
相关推荐
5. 使用拦截器：Vue-resource还支持设置请求和响应拦截器，可以用于添加额外的逻辑，如处理认证、添加通用的请求头或者统一处理错误等。 6. 注意事项：Vue-resource自Vue 2.5版本后已被官方弃用，推荐使用axios或...
作用：发送http请求 特点： 1 体积小 vue-resource非常小巧，在压缩以后只有大约12KB，服务端...拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。
Vue-resource拦截器判断token失效跳转的实例 本文将详细讲解 Vue-resource 中的拦截器机制，并提供一个实例，演示如何使用拦截器来判断 token 是否失效，并自动跳转到登录页面。 首先，让我们来了解什么是拦截器。...
vue-resource 拦截器...在 vue-resource 中，拦截器的使用可以帮助我们实现统一的 request 参数、处理统一的 response 错误、token 验证机制等。通过拦截器，我们可以更好地控制和处理客户端和服务器之间的交互。
拦截器是 Vue-resource 提供的一种机制，可以在请求发送前或响应返回后执行自定义函数，从而实现全局的操作。这极大地提高了代码的可维护性和复用性。在本篇中，我们将详细介绍如何使用 Vue-resource 的拦截器处理 ...
使用vue-resource，设置头信息： Vue.http.interceptors.push((request, next)...以上这篇vue-resource拦截器设置头信息的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
此外，vue-resource支持拦截器，允许你在请求发送前或收到响应后执行某些操作。例如，全局设置一个处理所有请求的拦截器： ```javascript Vue.http.interceptors.push((request, next) => { // 在请求发送前操作，...
5. 拦截器：vue-resource提供拦截器功能，可以在请求发送前或响应返回后进行额外操作。 虽然vue-resource不再被官方推荐，但其源码仍然具有学习价值，可以帮助开发者理解如何构建类似的HTTP库，或者了解Vue.js如何...
4. 提供拦截器功能：拦截器可以在请求发送前和发送请求后执行一些处理，例如在发送请求前在headers中加入access_token，或在请求失败时统一处理错误，这对于代码的复用和维护非常有帮助。 在使用vue-resource时，...
在 Vue Resource 中，我们也可以使用拦截器来设置请求头。例如： ```javascript Vue.http.interceptors.push((request, next) => { request.headers.set('token', token); next((response) => { return response;...
5. **响应拦截器**：Axios提供响应拦截器，可以在请求成功或失败之前处理逻辑。例如，添加响应拦截器检查状态码： ```javascript axios.interceptors.response.use( response => response, error => { if ...
CORS 是一种允许服务器放宽同源策略限制的方法，使得前端应用（如 AngularJS、React 或 Vue.js）可以从不同的域名向服务器发送请求。在默认情况下，浏览器会阻止此类请求，除非服务器明确允许。Spring Security 提供...
在响应拦截器中，还可以处理登录状态过期的问题，若发现返回的响应表明令牌无效，可以自动清除本地存储的token并重定向至登录页面。 `api.js`文件则负责定义所有的API接口，将每个接口封装成单独的函数，这些函数...
总结一下，Vue和axios结合使用，利用请求拦截器可以在每个请求中自动添加公共参数，如用户令牌和ID，提高代码的可维护性和一致性。同时，通过`qs`库或`URLSearchParams`，我们可以控制axios如何处理POST请求的参数，...
照例先贴上 axios 的 gitHub 地址 ... request (请求)拦截器，例如：带上token等，设置请求头 response (响应)拦截器，例如：统一错误处理，页面重定向等 根据需要，结合 Vuex 做全局的loading动画，或者错误处理
在开发Web应用时，我们...设置token则通过拦截器在请求发送前修改配置；而全局设置URL请求网段也是通过拦截器在请求发送前进行路径拼接。这些方法提高了代码的可维护性和复用性，使得我们在处理HTTP请求时更加便捷。