项目中使用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验证的更多相关文章

  1. vue拦截器Vue.http.interceptors.push

    刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next ...

  2. http request 请求拦截器,有token值则配置上token值

    // http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { ...

  3. Mybatis利用拦截器做统一分页

    mybatis利用拦截器做统一分页 查询传递Page参数,或者传递继承Page的对象参数.拦截器查询记录之后,通过改造查询sql获取总记录数.赋值Page对象,返回. 示例项目:https://git ...

  4. SpringBoot起飞系列-拦截器和统一错误处理(七)

    一.前言 在前边部分我们已经学会了基本的web开发流程,在web开发中,我们通常会对请求做统一处理,比如未登录的用户要拦截掉相关请求,报错页面统一显示等等,这些都需要配置,可以大大简化我们的代码,实现 ...

  5. Vue 拦截器的使用

    拦截器 可以全局进行拦截器设置.拦截器在发送请求前或响应返回时做一些特殊的处理. 拦截器的注册 Vue.http.interceptors.push({ request: function ( req ...

  6. vue 拦截器

    拦截器:请求发送之前和请求返回之后的处理 使用:1.config---dev.env.js 开发环境配置 2. prod.env.js 生产 API:'http://www.wpdic.com' 3. ...

  7. 使用SpirngMvc拦截器实现对登陆用户的身份验证

    登陆成功则按returnUrl进行跳转,即跳转到登陆之前的页面,否则跳转到登陆页面,返回登陆错误信息. 1.SpringMVC.xml <!-- 映射器 --> <bean clas ...

  8. vue拦截器

    1.在路由添加 meta:{ requireAuth:true } 完整 { path: '/xx', name: 'xx', component: xx, meta:{ requireAuth:tr ...

  9. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

随机推荐

  1. SpringCloud的服务注册中心(三) - 进一步了解 Eureka

    一.服务治理参与者 服务注册中心: eureka-server 服务提供者:HELLO-SERVICE 服务消费者 :HELLO-CONSUMER 很多时候,客户端既是服务提供者又是服务消费者,-&g ...

  2. SpringCloud的EurekaClient : 客户端应用访问注册的微服务(有断路器场景)

    演示客户端应用如何访问注册在EurekaServer里的微服务 一.概念和定义 采用Ribbon或Feign方式访问注册到EurekaServer中的微服务.1.Ribbon实现了客户端负载均衡,2. ...

  3. Python学习之输入输出、数据类型

    #coding=utf-8 # 输入 print'100+200=',100+200 # 输入 # name = raw_input('tell me your name:') # print'hel ...

  4. Python 中格式化字符串 % 和 format 两种方法之间的区别

    Python2.6引入了 format 格式化字符串的方法,现在格式化字符串有两种方法,就是 % 和 format ,具体这两种方法有什么区别呢?请看以下解析. # 定义一个坐标值 c = (250, ...

  5. Python之函数基础

    1.函数的定义与调用 函数从大方针上考虑总共分为两种:一种是内置函数,另一种是自定义函数.今天主要讲的是自定义函数. s = '金老板小护士' #len(s) def my_len(): #自定义函数 ...

  6. Java-NIO(八):DatagramChannel

    Java NIO中的DatagramChannel是一个能收发UDP包的通道.操作步骤: 1)打开 DatagramChannel 2)接收/发送数据 同样它也支持NIO的非阻塞模式操作,例如: @T ...

  7. JavaScript的数组实现队列与堆栈的方法

    一.队列和堆栈的简单介绍 1.1.队列的基本概念 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 如下图所示: 1.2.堆栈的基本概念 堆栈:是一种支持后进先出(LIFO)的 ...

  8. Linux kernel 4.9及以上开启TCP BBR拥塞算法

    Linux kernel 4.9及以上开启TCP BBR拥塞算法 BBR 目的是要尽量跑满带宽, 并且尽量不要有排队的情况, 效果并不比速锐差 Linux kernel 4.9+ 已支持 tcp_bb ...

  9. getgpc($k, $t='GP'),怎么返回的是 NULL?

    <?php /** * 实用小代码 * 获得GET POST COOKIS */ $html=<<<WORD <form method="post"& ...

  10. Goldwell平台官网简介-欢迎咨询经理罗琪

    Goldwell平台官网简介-欢迎咨询经理罗琪1: Goldwell官网是一家国际衍生品的经纪公司.它对柬埔寨金融市场和客户绝对的承诺,在SECC的监管和保护下,提供了更加多元化的金融交易工具. Go ...