园友参考  https://www.cnblogs.com/lhl66/p/8022823.html

vue-resource 拦截器使用
在vue项目使用vue-resource的过程中,临时增加了一个需求,需要在任何一个页面任何一次http请求,增加对token过期的判断,如果token已过期,需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断,那么会是一个非常大的修改工作量。
vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后,如果设置了拦截器如下,会优先执行拦截器函数,获取响应体,然后才会决定是否把response返回给then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断,来决定是跳转到登录页面还是留在当前页面继续获取数据。

 Vue.http.interceptors.push(function (request, next) {//拦截器
request.headers.set('Authorization', Utils.getCookie('token')); //setting request.headers
request.headers.set('Uid', Utils.getCookie('uid') ? Utils.getCookie('uid').toString() : undefined); //setting request.headers
next()
})
function getCookie(name) {
if (!localStorage[name]) {
return null
}
try {
let o = JSON.parse(localStorage[name])
if (!o || o.expires < Date.now()) {
return null
} else {
return o.value
}
} catch (e) {
// 兼容其他localstorage
console.log(e)
return localStorage[name]
} finally {
}
}

vue-resource 拦截器的使用的更多相关文章

  1. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  2. vue router拦截器的简单使用

    之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过 ...

  3. vue --- axios拦截器+form格式请求体

    在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...

  4. vue interceptors(拦截器)

    拦截器 顾名思义: 就是半路个您劫持, 拦截器 其实在项目和自己写demo中,总会遇到请求方面需要在请求头里面做判断或者添加一些东西, 这时候 vue 中应用中axios的 interceptors  ...

  5. vue axios 拦截器

    前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...

  6. vue axios拦截器的封装

    // request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...

  7. vue axios拦截器介绍

    关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...

  8. vue 路由拦截器和请求拦截器

    路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...

  9. vue.js 拦截器

    document.cookie = "mylogin=1";//1:登陆成功:保存登录状态 main.js router.beforeEach((to, from, next) = ...

  10. vue axios拦截器加全局loading

    import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...

随机推荐

  1. STL二分查找函数的应用

    应用二分查找的条件必须是数组有序! 其中二分查找函数有三个binary_serch,upper_bound,lower_bound 测试数组 int n1[]={1,2,2,3,3,4,5}; int ...

  2. top Universities in Mechanical Engineering

  3. plot3d

    plot3d plot3D a format for structured grid data that was popularized by NASA's CFD visualization Aut ...

  4. SQL学习笔记:基础SQL语句

    目录 语句特点 进入数据库 基本查询语句 SELECT DISTINCT WHERE AND/OR/NOT :逻辑运算符 ORDER BY :排序 基本修改语句 INSERT:添加语句 UPDATE: ...

  5. Spring整合Junit框架

    一.开发环境 eclipse版本:4.6.1 maven版本:3.3.3 junit版本:4.12 spring版本:4.1.5.RELEASE JDK版本:1.8.0_111 二.项目结构 图 三. ...

  6. JavaScript学习总结(12)——2016 年 7 个顶级 JavaScript 框架

    当涉及到Web开发时,JavaScript框架往往是一些开发人员和企业最受欢迎的平台.可能,你有机会尝试过一两个顶级的JavaScript框架,但你仍然有点不确定哪个才是最佳的最值得掌握的,或者哪个值 ...

  7. RabbitMQ-rabbitmqctl多机多节点和单机多节点集群搭建(五)

    准备 1.准备3台物理机 我这里通过本地机和2台虚拟模拟我是mac通过(Parallel Desktop 实现) 2.按照签名的liux安装步骤在3台机器都安装rabiitMq 3.将任意一节点的co ...

  8. Stealing Harry Potter's Precious BFS+DFS

    Problem Description Harry Potter has some precious. For example, his invisible robe, his wand and hi ...

  9. poj——2891 Strange Way to Express Integers

    Strange Way to Express Integers Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 16839 ...

  10. 24、Java并发性和多线程-信号量

    以下内容转自http://ifeve.com/semaphore/: Semaphore(信号量) 是一个线程同步结构,用于在线程间传递信号,以避免出现信号丢失(译者注:下文会具体介绍),或者像锁一样 ...