园友参考  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. UVA - 11212 Editing a Book (IDA*搜索)

    题目: 给出n(1<n<10)个数字组成的序列,每次操作可以选取一段连续的区间将这个区间之中的数字放到其他任意位置.问最少经过多少次操作可将序列变为1,2,3……n. 思路: 利用IDA* ...

  2. python_ 学习笔记(基本数据类型)

    python3有6中标准数据类型:Number(数字).String(字符串).List(列表).Tuple(元组).Dictionary(字典).Set(集合)不可变数据:Number.String ...

  3. mesh topology for airfoil, wing, blade, turbo

    ref Ch. 5, Anderson, CFD the basics with applications numerical grid generation foundations and appl ...

  4. #if 0的意义和好处

    在调试中经常遇到,写好的程序,需要调试相反的两方面,如:有两款单片机的程序,分别对应着不同的硬件引脚,我们把代码都写上了,但是不能同时让他们起效,通常的办法是/**/屏蔽一些段落,但是调试起来很麻烦. ...

  5. flask——CSRFToken保护

    根据 csrf_token 校验原理,具体操作步骤有以下几步: 1.后端生成 csrf_token 的值,在前端请求登录或者注册界面的时候将值传给前端,传给前端的方式可能有以下两种: 在模板中的 Fr ...

  6. 关于构造函数及参数执行顺序说明(c#)

    原文:https://blog.csdn.net/junmail/article/details/83249186 构造函数的执行顺序: 子类静态变量>子类静态构造函数>子类非静态变量&g ...

  7. cocos2dx 2.1.x 退出SDK相关界面后EGLView 不刷新渲染

    报错内容为: [3390:1456879] failed to call contextcocos2d: surface size: 0x0[3390:1456879] Failed to make ...

  8. 免XML的SpringMVC配置

    Servlet 3.0以后,新增了一些注解,使得web.xml可以省略掉.这样配合Spring的JavaConfig就可以实现免xml的项目配置,这里简单搭建一个免XML的SpringMVC.Spri ...

  9. 洛谷—— P2919 [USACO08NOV]守护农场Guarding the Farm

    https://www.luogu.org/problem/show?pid=2919 题目描述 The farm has many hills upon which Farmer John woul ...

  10. NETCore项目报错 An error occurred while starting the application

    在发布到IIS的webApi项目中,运行时报出以上错误, 解决方法: 1.打开发布目录文件夹,找到web.config文件 2.打开web.config找到stdoutLogEnabled=" ...