vue拦截器实现统一token,并兼容IE9验证
项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互。如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活。这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9。
import axios from 'axios'; // 这里的config包含每次请求的内容,在这里把token放到请求头
axios.interceptors.request.use(function (config) {
let token = window.localStorage.getItem("tokenid"); //从缓存中取token
if (token) {
config.headers.Authorization = token; //将token放到请求头发送给服务器 //这里主要是为了兼容IE9
var browser = navigator.appName;
var b_version = navigator.appVersion;
if (browser == 'Netscape' && b_version.indexOf(';') < 0) { //火狐 } else {
if (b_version.indexOf(';') < 0) {
return config;
}
var version = b_version.split(";");
var trim_Version = version[1].replace(/[ ]/g, ""); if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") { //IE9
if (config.url.indexOf('?') > 0) {
config.url = config.url + "&token=" + JSON.parse(token).value;
}
else {
config.url = config.url + "?token=" + JSON.parse(token).value;
}
}
}
} else {
localStorage.clear(); //清空缓存
if (router.currentRoute.name && router.currentRoute.name.toLowerCase() == "login") {
//这里需要排除登陆(或者说是第一次请求获取token)的时候的请求验证,我这里没做处理
//我的后台api接口,并没有对login接口做token验证,所以这里不做处理
} else {
//除登陆接口外,其他需要token验证的方法,会走这里且返回null
return null;
}
}
return config;
}, function (err) {
// return Promise.reject(err);
}); // http response 拦截器
axios.interceptors.response.use(
response => {
return response; //请求成功的时候返回的data
},
error => {
try {
if (error.response) {
switch (error.response.status) {
case 401://token过期,清除token并跳转到登录页面
localStorage.clear();
var baurl = window.location.href;
router.replace({
path: 'login',
query: { backUrl: baurl }
});
return;
}
}
return Promise.reject(error.response.data)
}
catch (e) { }
});
写在后面。因为我的token放在了缓存中,所以在每次请求前,我会先在前端取出token,并验证其时效性,如果过期或不存在会先跳转到登陆页,而不会走拦截器去请求请求。具体也参考mounted()方法。
vue拦截器实现统一token,并兼容IE9验证的更多相关文章
- vue拦截器Vue.http.interceptors.push
刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next ...
- http request 请求拦截器,有token值则配置上token值
// http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { ...
- Mybatis利用拦截器做统一分页
mybatis利用拦截器做统一分页 查询传递Page参数,或者传递继承Page的对象参数.拦截器查询记录之后,通过改造查询sql获取总记录数.赋值Page对象,返回. 示例项目:https://git ...
- SpringBoot起飞系列-拦截器和统一错误处理(七)
一.前言 在前边部分我们已经学会了基本的web开发流程,在web开发中,我们通常会对请求做统一处理,比如未登录的用户要拦截掉相关请求,报错页面统一显示等等,这些都需要配置,可以大大简化我们的代码,实现 ...
- Vue 拦截器的使用
拦截器 可以全局进行拦截器设置.拦截器在发送请求前或响应返回时做一些特殊的处理. 拦截器的注册 Vue.http.interceptors.push({ request: function ( req ...
- vue 拦截器
拦截器:请求发送之前和请求返回之后的处理 使用:1.config---dev.env.js 开发环境配置 2. prod.env.js 生产 API:'http://www.wpdic.com' 3. ...
- 使用SpirngMvc拦截器实现对登陆用户的身份验证
登陆成功则按returnUrl进行跳转,即跳转到登陆之前的页面,否则跳转到登陆页面,返回登陆错误信息. 1.SpringMVC.xml <!-- 映射器 --> <bean clas ...
- vue拦截器
1.在路由添加 meta:{ requireAuth:true } 完整 { path: '/xx', name: 'xx', component: xx, meta:{ requireAuth:tr ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
随机推荐
- python 内置函数之lambda-filter-reduce-apply-map
(1)lambda lambda是Python中一个很有用的语法,它允许你快速定义单行最小函数.类似于C语言中的宏,可以用在任何需要函数的地方. 基本语法如下: 函数名 = lambda args1, ...
- linux 进程间通信的3种高级方式及优缺点
由于不同的进程运行在各自不同的内存空间中.一方对于变量的修改另一方是无法感知的.因此.进程之间的信息传递不可能通过变量或其它数据结构直接进行,只能通进程间通信来完成. 根据进程通信时信息量大小的不同, ...
- Mego开发文档 - 事务
事务 事务允许以原子方式处理多个数据库操作.如果事务已提交,则所有操作都已成功应用于数据库.如果事务回滚,则没有任何操作应用于数据库. 默认行为 默认情况下,如果数据库提供程序支持事务,则单次的提交操 ...
- GIT入门笔记(2)- 典型的工作模式
分布式相比于集中式的最大区别在于开发者可以提交到本地,每个开发者通过克隆(git clone),在本地机器上拷贝一个完整的Git仓库. 下图是经典的git开发过程. Git的功能特性: ...
- Linux上 ps 命令的用法
ps a 显示现行终端机下的所有程序,包括其他用户的程序.2)ps -A 显示所有程序. 3)ps c 列出程序时,显示每个程序真正的指令名称,而不包含路径,参数或常驻服务的标示. 4)ps -e 此 ...
- [转]安卓新一代多渠道打包工具Walle 解决渠道包V2签名问题
转自https://www.jianshu.com/p/572b59829a08 为什么要打多个渠道的包? 大家都知道,android应用商店大大小小有几百个,作为一个有志向的app,就需要做到统计各 ...
- SpringBoot(五):@ConfigurationProperties配置参数绑定
在springmvc或其他ssh框架中如果我们要实现一个配置参数的加载,需要使用代码实现读取properties文件等操作,或者需要使用其他属性@value(name="username&q ...
- React-Native(四):React Native之View学习
React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/) 基于HelloWord修改项目代码: /** * Sample React Native ...
- POJ-1511 Invitation Cards---Dijkstra+队列优化+前向星正向反向存图
题目链接: https://vjudge.net/problem/POJ-1511 题目大意: 给定节点数n,和边数m,边是单向边. 问从1节点出发到2,3,...n 这些节点路程和从从这些节点回来到 ...
- 学习HTML的第一次课
1.母板中的标签的含义 1.1< Doctype html/ > 声明文档类型为HTML 1.2< meta charset="UTF-8"/ > 设当前网 ...