vue-resource 拦截器使用详解

在vue项目使用vue-resource的过程中，临时增加了一个需求，需要在任何一个页面任何一次http请求，增加对token过期的判断，如果token已过期，需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断，那么会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢？答案是有的!

vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后，如果设置了拦截器如下，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回给then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断，来决定是跳转到登录页面还是留在当前页面继续获取数据。

下边代码添加在main.js中

Vue.http.interceptors.push((request, next) => {
　console.log(this)//此处this为请求所在页面的Vue实例
 // modify request
 request.method = 'POST';//在请求之前可以进行一些预处理和配置

 // continue to next interceptor

　　next((response) => {//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断，就添加在此处，页面中任何一次http请求都会先调用此处方法

  　　response.body = '...';
　　　　return response;

 });
});

在知道此方法之前，鄙人想了一个笨方法，但是也能在一定程度上降低修改工作量。方法是为Vue绑定一个this.$$http.get方法取代this.$http.get方法，每个页面的http请求添加个$在$http前即可。

// 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){
      let promise = new Promise(function(reslove,reject){
        v.$http.get(a,b).then((res)=>{
          reslove(res)
        },(err)=>{
　　　　　　　　　　　　//处理token过期问题。
        })
      })
      return promise;
    }
  }
}
module.exports=plugin;

//main.js

import ajax from './ajax.js'
Vue.use(ajax)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-resouce设置请求头的三种方法

    本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下: 第一种:在Vue实例中设置 var vm = new Vue({ el:'#rrapp', data:{ showList: true, title: null }, http: { root: '/', headers: { token: token } } }) 第二种:全局设置请求头 Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk'; 第三种:在拦截器

  • vue-resource拦截器设置头信息的实例

    使用vue-resource,设置头信息: Vue.http.interceptors.push((request, next) => { request.headers.set('Authorization', token) console.log(request.headers) next(response => { console.log(response.status) return response }) }) 以上这篇vue-resource拦截器设置头信息的实例就是小编分享给大家

  • vue-resource 拦截器（interceptor）的使用详解

    拦截器-interceptor 在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用? 拦截器能帮助我们解决的 1.添加统一的request的参数 比如header中加入X-Requested-With,比如客户端需要实现sign和token的验证机制,比如你可以写$http.get('/files', params),拦截器帮你拼接成 http://www.xxxx.

  • AngularJS中的拦截器实例详解

    AngularJS中的拦截器实例详解 异步操作 有时候需要在拦截器中做一些异步操作.幸运的是, AngularJS 允许我们返回一个 promise 延后处理.它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应. 下面是项目中用到的代码. ZbtjxcApp.factory('myHttpInterceptor', ['$q', '$window','$location', function($q, $window,$location) { return { // 全局响应 'respo

  • Mybatis Plugin拦截器开发过程详解

    这篇文章主要介绍了Mybatis Plugin拦截器开发过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.Plugin MyBatis 允许使用插件来拦截的方法调用包括: • Executor (update, query, flushStatements, commit, rollback,getTransaction, close, isClosed) • ParameterHandler (getParameterObject,

  • Java Spring拦截器案例详解

    springmvc提供了拦截器,类似于过滤器,他将在我们的请求具体出来之前先做检查,有权决定接下来是否继续,对我们的请求进行加工. 拦截器,可以设计多个. 通过实现handlerunterceptor,这是个接口 定义了非常重要的三个方法: 后置处理 前置处理 完成处理 案例一: 通过拦截器实现方法耗时统计与警告 package com.xy.interceptors; import org.springframework.web.servlet.HandlerInterceptor; impo

  • Python内建属性getattribute拦截器使用详解

    目录 引言 1.内建属性__getattribute__的用法 2.重写__getattribute__实现属性拦截功能 总结要点: 引言 因为python中所有类默认继承object类. 而object类提供了了很多原始的内建属性和方法,所以用户自定义的类在Python中也会继承这些内建属性. 可以使用dir()函数可以查看,虽然python提供了很多内建属性但实际开发中常用的不多.而很多系统提供的内建属性实际开发中用户都需要重写后才会使用. 对于python来说,属性或者函数都可以被理解成一

  • SpringBoot面试突击之过滤器和拦截器区别详解

    SpringBoot面试突击之过滤器和拦截器区别详解

    目录 实现过滤器和拦截器 a) 实现过滤器 b) 实现拦截器 过滤器 VS 拦截器 1.出身不同 2.触发时机不同 3.实现不同 4.支持的项目类型不同 5.使用的场景不同 总结 实现过滤器和拦截器 首先,我们先来看一下二者在 Spring Boot 项目中的具体实现,这对后续理解二者的区别有很大的帮助. a) 实现过滤器 过滤器可以使用 Servlet 3.0 提供的 @WebFilter 注解,配置过滤的 URL 规则,然后再实现 Filter 接口,重写接口中的 doFilter 方法,具

  • vue-resource 拦截器使用详解

    在vue项目使用vue-resource的过程中,临时增加了一个需求,需要在任何一个页面任何一次http请求,增加对token过期的判断,如果token已过期,需要跳转至登录页面.如果要在每个页面中的http请求操作中添加一次判断,那么会是一个非常大的修改工作量.那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的! vue-resource的interceptors拦截器的作用正是解决此需求的妙方.在每次http的请求响应之后,如果设置了拦截器如下,会

  • MyBatis自定义SQL拦截器示例详解

    目录 前言 定义是否开启注解 注册SQL 拦截器 处理逻辑 如何使用 总结 前言 本文主要是讲通过 MyBaits 的 Interceptor 的拓展点进行对 MyBatis 执行 SQL 之前做一个逻辑拦截实现自定义逻辑的插入执行. 适合场景:1. 比如限制数据库查询最大访问条数:2. 限制登录用户只能访问当前机构数据. 定义是否开启注解 定义是否开启注解, 主要做的一件事情就是是否添加 SQL 拦截器. // 全局开启 @Retention(RetentionPolicy.RUNTIME)

  • 微信小程序wx.request拦截器使用详解

    一. 请求后台的时候,服务端对每一个请求都会验证权限,而前端也需要对服务器返回的特殊状态码统一处理,所以可以针对业务封装请求. 首先我们通过request拦截器在每个请求头里面塞入token等信息,好让后端对请求进行权限验证.并创建一个respone拦截器,当服务端返回特殊的状态码,我们统一做处理,如未登录网络错误等操作. 二. 1.首先了解小程序官方api-wx.request() ,通过示例可以看出wx.request的参数是一个对象,拥有传输地址,传输内容,响应头,成功失败回调函数等属性和

  • Springboot项目使用拦截器方法详解

    1. 创建一个拦截器并实现HandlerInterceptor接口 package com.leiyuan.bs.interceptor; import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.web.servlet.ModelAndView; import javax.servlet.http.HttpServletRequest; import javax.servlet.h

  • spring boot 注册拦截器过程详解

    spring boot 注册拦截器过程详解

    拦截器是动态拦截Action调用的对象.它提供了一种机制可以使开发者可以定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行,同时也提供了一种可以提取action中可重用部分的方式.在AOP(Aspect-Oriented Programming)中拦截器用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作. 如何在spring boot中添加拦截器? 1.首先自己实现一个拦截器 import org.springframework.web.ser

随机推荐