vue拦截器实现统一token,并兼容IE9验证功能


Posted in Javascript onApril 26, 2018

项目中使用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验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中Dom的基本操作小结
Jan 23 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
使用Vue动态生成form表单的实例代码
Apr 26 #Javascript
Javascript的console['']常用输入方法汇总
Apr 26 #Javascript
r.js来合并压缩css文件的示例
Apr 26 #Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
Webpack打包字体font-awesome的方法示例
Apr 26 #Javascript
webpack配置打包后图片路径出错的解决
Apr 26 #Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
You might like
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
基于Vue制作组织架构树组件
2017/12/06 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
JavaScript中的 new 命令
2019/05/22 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
python 对key为时间的dict排序方法
2018/10/17 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python实现的config文件读写功能示例
2019/09/24 Python
wxPython实现画图板
2020/08/27 Python
python实现字符串和数字拼接
2020/03/02 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
中学生校园广播稿
2014/01/16 职场文书
护士毕业生自荐信
2014/02/07 职场文书
表彰大会主持词
2014/03/26 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
市场调查策划方案
2014/06/10 职场文书
中学感恩教育活动总结
2015/05/05 职场文书