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图片放大功能简单实现
Aug 01 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
使用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
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
python爬取网易云音乐评论
2018/11/16 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
《孔子游春》教学反思
2014/02/25 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
审计专业自荐信范文
2014/04/21 职场文书
离婚纠纷代理词
2015/05/23 职场文书
高老头读书笔记
2015/06/30 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
配置Kubernetes外网访问集群
2022/03/31 Servers
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android