vue-resource 拦截器的使用
园友参考 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 拦截器的使用的更多相关文章
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue router拦截器的简单使用
之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过 ...
- vue --- axios拦截器+form格式请求体
在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...
- vue interceptors(拦截器)
拦截器 顾名思义: 就是半路个您劫持, 拦截器 其实在项目和自己写demo中,总会遇到请求方面需要在请求头里面做判断或者添加一些东西, 这时候 vue 中应用中axios的 interceptors ...
- vue axios 拦截器
前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...
- vue axios拦截器的封装
// request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...
- vue axios拦截器介绍
关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...
- vue 路由拦截器和请求拦截器
路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...
- vue.js 拦截器
document.cookie = "mylogin=1";//1:登陆成功:保存登录状态 main.js router.beforeEach((to, from, next) = ...
- vue axios拦截器加全局loading
import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...
随机推荐
- [Luogu] P4366 [Code+#4]最短路
题目背景 在北纬 91° ,有一个神奇的国度,叫做企鹅国.这里的企鹅也有自己发达的文明,称为企鹅文明.因为企鹅只有黑白两种颜色,所以他们的数学也是以二进制为基础发展的. 比如早在 1110100111 ...
- TestNG套件测试(二)
在xml中指定要运行的整个包来执行套件测试 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...
- Linux有几种安装软件的方式?????
看了Windows后台软件安装的过程,想必Linux也是这样.拿RHEL7来打比方 最开始Linux上安装软件只提供源代码,需要自己去编译源代码,拷贝库文件等 RPM 红帽软件包管理器可以自动地执行上 ...
- Tomcat服务器启动后访问localhost:8080显示404的原因
原因:在eclipse中关联了Tomcat服务器 重点来了,如果你是在eclipse中点击启动按钮启动的Tomcat 那么Tomcat不会默认部署它自己的测试项目(也就是大猫localhost:808 ...
- buf.writeInt8()函数详解
buf.writeInt8(value, offset[, noAssert]) value {Number} 需要被写入到 Buffer 的字节 offset {Number} 0 <= of ...
- 九度oj 题目1053:互换最大最小数
题目1053:互换最大最小数 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:7538 解决:3049 题目描述: 输入一个数n,然后输入n个数值各不相同,调换数组中最大和最小的两个数,然后 ...
- 中庸之道(codevs 2021)
题目描述 Description 给定一个长度为N的序列,有Q次询问,每次询问区间[L,R]的中位数. 数据保证序列中任意两个数不相同,且询问的所有区间长度为奇数. 输入描述 Input Descri ...
- J - A Bug's Life 并查集
Background Professor Hopper is researching the sexual behavior of a rare species of bugs. He assumes ...
- T1075 明明的随机数 codevs
http://codevs.cn/problem/1075/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 明明想在学校中 ...
- nginx: 添加文件下载目录
修改nginx.conf,添加如下行: location /file/ { alias /usr/share/nginx/html/file/; add_header Content-di ...