vue拦截器实现统一token,并兼容IE9验证
项目中使用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验证相关推荐
- vue 拦截器,增加token参数
1.使用请求拦截器,拦截vue所有请求,增加token参数 使用倒数计时,假如token有效期60分钟,会在59分钟的时候去重新拿着refresh_Token,去请求新的token. 注意:如果一个账 ...
- Vue 拦截器对token过期处理
最近在做的一个项目,需要每个http请求下 都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. 1. 在vueresource情况下 设置t ...
- Django中间件配合Vue拦截器的简单使用
axios拦截器是什么? axios拦截器可以拦截每一次的请求和响应,然后进行相应的处理.拦截器分为请求拦截器和响应拦截器,请求拦截器可以统一在你发送请求前在请求体里加上token:响应拦截器的话 ...
- Vue 拦截器原理和详细使用
拦截器原理和作用 首先拦截器在src/utils/request.js 文件中,拦截器分为请求拦截器和响应拦截器. 页面中的每一个请求都会经过请求拦截和响应拦截,所以一般在这个文件进行操作. 这一文件 ...
- 给axios的请求拦截器中配置token
axios 1. 配置token 用户第一次登录系统时,服务器端会返回一个身份秘钥信息(token),表明当前用户有资格.权限访问服务器,客户端获取token之后,通过sessionStorage存储 ...
- .NET中间件以及VUE拦截器联合使用
.NET中间件以及VUE拦截器联合使用 工作中遇见的问题,边学边弄,记录一下 Vue的UI库使用的是antvue 3.2.9版本的. 业务逻辑 特性 //特性public class ModelEsi ...
- vue fromData提交表单(文件)的同时 axios通过将token封装一起发送,Springboot后端拦截器通过request.getParameter获取,Redis验证token
一.前端: 1.在封装好的axios接口: import axios from 'axios'axios.defaults.withCredentials = true;// 允许跨域携带cookie ...
- vue拦截器的使用(萌新怕不懂的看过来)
由于我是第一次使用这个东西,我看到拦截器这个高大上的名字就感觉到害怕,所以做了这么多项目也怕接触这个东西,现在想到接口要进行处理,并且集中放置,所以利用了最近刚学的番茄时钟工作法,开了一个番茄,告诉自 ...
- vue拦截器及请求封装
1.vue项目的src文件夹中创建request文件夹 (1)request文件夹中创建index.js (拦截器主要代码) /*** 请求封装*/import axios from 'axios'; ...
最新文章
- python pandas rename_使用Pandas重命名文件
- Android Weekly Notes Issue #226
- Java程序员从笨鸟到菜鸟之(八十)细谈Spring(九)spring+hibernate声明式事务管理详解
- Setting up Ethereum smart contract development using Parity on Ubuntu
- mysql数据库的系统操作基本操作
- 工作314:uni-提交成功加入表单验证
- 腾讯专家谈全球数据保护案例
- Fabric 报错:java.lang.IllegalArgumentException: UserContext user‘s name missing.
- linux在cd后直接显示文件格式,Linux命令学习笔记之一目录与文件基本操作
- 一个我自己建的程序员资料分享站
- numpy 常用工具函数 —— np.bincount/np.average
- Anciroid的IPC机制-Binder概述
- Audio Jungle宣传专题片头音乐AE模板专用配乐合集-永久更新
- 桌面程序 取色器 colors.exe
- 嵌入式驱动工程师开发学习路线
- 计算机键盘排列方式,电脑上的键盘布局是怎么形成的?
- linux的镜像文件有什么用,【iso】iso是什么?iso是什么意思?
- 相机光学传递函数MTF
- 适者生存还是强者生存
- WPF x:Key标签
热门文章
- android视频闪退,安卓 app 视频闪退问题
- freeswitch cdr mysql_部署FreeSWITCH + FusionPBX
- java架构分层_java分层架构概念
- matlab计算海洋浮力频率_帝国理工学院海洋、海岸与建筑环境工程流体力学理学硕士研究生offer一枚...
- 『数学』--数论--组合数+卢卡斯定理+扩展卢卡斯定理
- Linux系统开机启动过程分析
- 【face-landmarks】人脸关键点检测汇总
- Eigen入门之密集矩阵 6 - Reductions, visitors and broadcasting
- pandas 机器学习_机器学习的PANDAS
- 经常收到信用卡邀请短信,但为什么总是办不下来?