vue-resource 拦截器使用详解

Vue-resource：长沙网络推广实践分享

在Vue项目中使用vue-resource时，我们可能会遇到一个常见需求：需要在每个页面的每次HTTP请求中，对token过期进行判断。如果token已过期，我们需要引导用户跳转至登录页面。这无疑会涉及到大量的代码修改，那么vue-resource是否有一种机制可以简化这一操作呢？答案是肯定的，那就是使用（interceptors）。

vue-resource的功能提供了一个绝佳的解决方案。在每次http请求响应之后，可以通过设置来优先执行一个函数，获取响应体，然后基于这个响应体来决定是否继续处理数据或者跳转到登录页面。

以下是如何在main.js中添加的示例代码：

```javascript

Vue.httpterceptors.push((request, next) => {

// 在请求之前进行一些预处理和配置

request.method = 'POST';

console.log(this); // 此处this为请求所在页面的Vue实例

// 继续到下一个

next((response) => {

// 在响应之后传给then之前对response进行修改和逻辑判断

// 对token是否已过期的判断就添加在这里，页面中任何一次http请求都会先调用此处方法

if (isTokenExpired(response)) { // 假设存在一个isTokenExpired函数来判断token是否过期

// 处理token过期问题，例如跳转至登录页面

redirectToLoginPage();

} else {

return response;

}

});

});

```

在此之前，我尝试了一种较为笨拙的方法，虽然也能在一定程度上降低修改工作量，但显然不够优雅。我创建了一个自定义的HTTP方法（比如$$http），在每个页面的HTTP请求中使用这个新方法，然后在其中添加对token过期的处理逻辑。以下是该方法的基本实现：

```javascript

// ajax.js

function plugin(Vue) {

Object.defineProperties(Vue.prototype, {

$$http: {

get() {

return option(Vue);

}

}

});

}

function option(Vue) {

let v = new Vue();

return {

get(a, b) {

return v.$http.get(a, b).then((res) => {

// 处理token过期问题。如果token过期，则进行相应处理，否则直接返回结果。

});

}

};

}

module.exports = plugin;

```

然后在main.js中引入并使用这个插件：

```javascript

import ajax from './ajax.js';

Vue.use(ajax);

```这种方法的缺点是需要在每个页面的每个请求中都进行处理，显得比较繁琐。相比之下，使用vue-resource的功能更为简洁和高效。希望这篇文章能对你有所帮助，也希望大家能多多支持长沙网络推广和狼蚁SEO。 如果有任何疑问或需要进一步的讨论，欢迎提问。 记住要关注我们的动态哦！