项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互。如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活。这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9。

  1. import axios from 'axios';
  2.  
  3. // 这里的config包含每次请求的内容,在这里把token放到请求头
  4. axios.interceptors.request.use(function (config) {
  5. let token = window.localStorage.getItem("tokenid"); //从缓存中取token
  6. if (token) {
  7. config.headers.Authorization = token; //将token放到请求头发送给服务器
  8.  
  9. //这里主要是为了兼容IE9
  10. var browser = navigator.appName;
  11. var b_version = navigator.appVersion;
  12. if (browser == 'Netscape' && b_version.indexOf(';') < 0) { //火狐
  13.  
  14. } else {
  15. if (b_version.indexOf(';') < 0) {
  16. return config;
  17. }
  18. var version = b_version.split(";");
  19. var trim_Version = version[1].replace(/[ ]/g, "");
  20.  
  21. if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") { //IE9
  22. if (config.url.indexOf('?') > 0) {
  23. config.url = config.url + "&token=" + JSON.parse(token).value;
  24. }
  25. else {
  26. config.url = config.url + "?token=" + JSON.parse(token).value;
  27. }
  28. }
  29. }
  30. } else {
  31. localStorage.clear(); //清空缓存
  32. if (router.currentRoute.name && router.currentRoute.name.toLowerCase() == "login") {
  33.     //这里需要排除登陆(或者说是第一次请求获取token)的时候的请求验证,我这里没做处理
          //我的后台api接口,并没有对login接口做token验证,所以这里不做处理
    } else {     
  34.     //除登陆接口外,其他需要token验证的方法,会走这里且返回null
  35. return null;
  36. }
  37. }
  38. return config;
  39. }, function (err) {
  40. // return Promise.reject(err);
  41. });
  42.  
  43. // http response 拦截器
  44. axios.interceptors.response.use(
  45. response => {
  46. return response; //请求成功的时候返回的data
  47. },
  48. error => {
  49. try {
  50. if (error.response) {
  51. switch (error.response.status) {
  52. case 401://token过期,清除token并跳转到登录页面
  53. localStorage.clear();
  54. var baurl = window.location.href;
  55.      router.replace({
  56. path: 'login',
  57. query: { backUrl: baurl }
  58. });
  59. return;
  60. }
  61. }
  62. return Promise.reject(error.response.data)
  63. }
  64. catch (e) {
  65.  
  66. }
  67. });

  写在后面。因为我的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. ArrayList源码学习----JDK1.7

    什么是ArrayList? ArrayList是存储一组数据的集合,底层也是基于数组的方式实现,实际上也是对数组元素的增删改查:它的主要特点是: 有序:(基于数组实现) 随机访问速度快:(进行随机访问 ...

  2. 如何在Java中避免equals方法的隐藏陷阱

    摘要 本文描述重载equals方法的技术,这种技术即使是具现类的子类增加了字段也能保证equal语义的正确性. 在<Effective Java>的第8项中,Josh Bloch描述了当继 ...

  3. Vue全家桶

    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...

  4. Java面向对象之构造函数 入门实例

    一.基础概念 1.什么时候定义构造函数: 当对象创建时,需要对象必须具备的内容,通过构造函数完成. 2.一般函数和构造函数的区别: 定义上:构造函数只为对象的初始化,只执行一次.一般函数定义对象应该具 ...

  5. nginx反向代理二级域名注意事项

    摘要 本文介绍了利用nginx实现多域名和多站点的绑定的方法及相关注意事项.您也可以只看本文的标题或红色标注部分.☺ 1.应用场景 我们经常会遇到在同一台服务器建立多个Web站点的情况,普遍的做法是为 ...

  6. pythonllk

    字符编码 数据类型 函数  装饰器  内置函数 迭代器 生成器 异常 反射 模块 类 对象 类的进阶 socket 进程线程 httphtmlcssJavaScriptjquery MysqlMysq ...

  7. ZOJ-2913 Bus Pass---BFS进阶版

    题目链接: https://vjudge.net/problem/ZOJ-2913 题目大意: 问哪个区域到公交路线上所有区域的最大距离最小 思路: 这里要求出到底是哪个区域到某些指定区域的最大距离最 ...

  8. DIY一个超简单的画图程序

    编译环境:VS2017+Easy_X 最近笔者一直在翻阅Easy_X的帮助手册,学习到了一些关于获取鼠标状态消息函数的知识,感觉收获颇大,于是想试验一番,将所学知识运用出来.先补充一下在Easy_X中 ...

  9. linux远程传输

    scp scp 命令是 SSH中最方便有用的命令了,scp就是secure copy,是用来进行远程文件拷贝的.数据传输使用 ssh,并且和ssh 使用相同的认证方式,提供相同的安全保证. 与rcp ...

  10. urllib.error

    #捕获异常 import urllib.request import urllib.error try: response = urllib.request.urlopen('http://sasd. ...