项目中使用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");  //从缓存中取tokenif (token) {config.headers.Authorization = token;    //将token放到请求头发送给服务器//这里主要是为了兼容IE9var 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") {  //IE9if (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验证的方法,会走这里且返回nullreturn 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()方法。

转载于:https://www.cnblogs.com/fuguoliang/p/8952107.html

vue拦截器实现统一token,并兼容IE9验证相关推荐

  1. vue 拦截器,增加token参数

    1.使用请求拦截器,拦截vue所有请求,增加token参数 使用倒数计时,假如token有效期60分钟,会在59分钟的时候去重新拿着refresh_Token,去请求新的token. 注意:如果一个账 ...

  2. Vue 拦截器对token过期处理

    最近在做的一个项目,需要每个http请求下 都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. 1.  在vueresource情况下 设置t ...

  3. Django中间件配合Vue拦截器的简单使用

    axios拦截器是什么?   axios拦截器可以拦截每一次的请求和响应,然后进行相应的处理.拦截器分为请求拦截器和响应拦截器,请求拦截器可以统一在你发送请求前在请求体里加上token:响应拦截器的话 ...

  4. Vue 拦截器原理和详细使用

    拦截器原理和作用 首先拦截器在src/utils/request.js 文件中,拦截器分为请求拦截器和响应拦截器. 页面中的每一个请求都会经过请求拦截和响应拦截,所以一般在这个文件进行操作. 这一文件 ...

  5. 给axios的请求拦截器中配置token

    axios 1. 配置token 用户第一次登录系统时,服务器端会返回一个身份秘钥信息(token),表明当前用户有资格.权限访问服务器,客户端获取token之后,通过sessionStorage存储 ...

  6. .NET中间件以及VUE拦截器联合使用

    .NET中间件以及VUE拦截器联合使用 工作中遇见的问题,边学边弄,记录一下 Vue的UI库使用的是antvue 3.2.9版本的. 业务逻辑 特性 //特性public class ModelEsi ...

  7. vue fromData提交表单(文件)的同时 axios通过将token封装一起发送,Springboot后端拦截器通过request.getParameter获取,Redis验证token

    一.前端: 1.在封装好的axios接口: import axios from 'axios'axios.defaults.withCredentials = true;// 允许跨域携带cookie ...

  8. vue拦截器的使用(萌新怕不懂的看过来)

    由于我是第一次使用这个东西,我看到拦截器这个高大上的名字就感觉到害怕,所以做了这么多项目也怕接触这个东西,现在想到接口要进行处理,并且集中放置,所以利用了最近刚学的番茄时钟工作法,开了一个番茄,告诉自 ...

  9. vue拦截器及请求封装

    1.vue项目的src文件夹中创建request文件夹 (1)request文件夹中创建index.js (拦截器主要代码) /*** 请求封装*/import axios from 'axios'; ...

最新文章

  1. python pandas rename_使用Pandas重命名文件
  2. Android Weekly Notes Issue #226
  3. Java程序员从笨鸟到菜鸟之(八十)细谈Spring(九)spring+hibernate声明式事务管理详解
  4. Setting up Ethereum smart contract development using Parity on Ubuntu
  5. mysql数据库的系统操作基本操作
  6. 工作314:uni-提交成功加入表单验证
  7. 腾讯专家谈全球数据保护案例
  8. Fabric 报错:java.lang.IllegalArgumentException: UserContext user‘s name missing.
  9. linux在cd后直接显示文件格式,Linux命令学习笔记之一目录与文件基本操作
  10. 一个我自己建的程序员资料分享站
  11. numpy 常用工具函数 —— np.bincount/np.average
  12. Anciroid的IPC机制-Binder概述
  13. Audio Jungle宣传专题片头音乐AE模板专用配乐合集-永久更新
  14. 桌面程序 取色器 colors.exe
  15. 嵌入式驱动工程师开发学习路线
  16. 计算机键盘排列方式,电脑上的键盘布局是怎么形成的?
  17. linux的镜像文件有什么用,【iso】iso是什么?iso是什么意思?
  18. 相机光学传递函数MTF
  19. 适者生存还是强者生存
  20. WPF x:Key标签

热门文章

  1. android视频闪退,安卓 app 视频闪退问题
  2. freeswitch cdr mysql_部署FreeSWITCH + FusionPBX
  3. java架构分层_java分层架构概念
  4. matlab计算海洋浮力频率_帝国理工学院海洋、海岸与建筑环境工程流体力学理学硕士研究生offer一枚...
  5. 『数学』--数论--组合数+卢卡斯定理+扩展卢卡斯定理
  6. Linux系统开机启动过程分析
  7. 【face-landmarks】人脸关键点检测汇总
  8. Eigen入门之密集矩阵 6 - Reductions, visitors and broadcasting
  9. pandas 机器学习_机器学习的PANDAS
  10. 经常收到信用卡邀请短信,但为什么总是办不下来?