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"); //从缓存中取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验证的更多相关文章
- vue拦截器Vue.http.interceptors.push
刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next ...
- http request 请求拦截器,有token值则配置上token值
// http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { ...
- Mybatis利用拦截器做统一分页
mybatis利用拦截器做统一分页 查询传递Page参数,或者传递继承Page的对象参数.拦截器查询记录之后,通过改造查询sql获取总记录数.赋值Page对象,返回. 示例项目:https://git ...
- SpringBoot起飞系列-拦截器和统一错误处理(七)
一.前言 在前边部分我们已经学会了基本的web开发流程,在web开发中,我们通常会对请求做统一处理,比如未登录的用户要拦截掉相关请求,报错页面统一显示等等,这些都需要配置,可以大大简化我们的代码,实现 ...
- Vue 拦截器的使用
拦截器 可以全局进行拦截器设置.拦截器在发送请求前或响应返回时做一些特殊的处理. 拦截器的注册 Vue.http.interceptors.push({ request: function ( req ...
- vue 拦截器
拦截器:请求发送之前和请求返回之后的处理 使用:1.config---dev.env.js 开发环境配置 2. prod.env.js 生产 API:'http://www.wpdic.com' 3. ...
- 使用SpirngMvc拦截器实现对登陆用户的身份验证
登陆成功则按returnUrl进行跳转,即跳转到登陆之前的页面,否则跳转到登陆页面,返回登陆错误信息. 1.SpringMVC.xml <!-- 映射器 --> <bean clas ...
- vue拦截器
1.在路由添加 meta:{ requireAuth:true } 完整 { path: '/xx', name: 'xx', component: xx, meta:{ requireAuth:tr ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
随机推荐
- AngularJS1.X学习笔记7-过滤器
最近参加笔试被虐成狗了,感觉自己的算法太弱了.但是还是先花点事件将这个AngularJS学习完.今天学习filter 一.内置过滤器 (1)过滤单个数据值 <!DOCTYPE html> ...
- Hazelcast分布式
一般的应用正式环境中都不止一台服务器(也就是说是集群的),那么如果只是简单的将数据预加载到内存,那么就会有数据不同步的现象. (更新了其中一台JVM,另一台JVM并不会收到通知从而保持数据同步). 这 ...
- C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字
这篇文章是 GDI+ 总结系列的第三篇,如果对 GDI+ 的基础使用不熟悉的朋友可以先看第一篇文章<C# 使用 GDI+ 画图>. 需求 需求是要实现给图片添加任意角度旋转的文字,文字的旋 ...
- Docker学习笔记 - Docker的镜像
一个容器实际上是运行在宿主机上的一个进程. 只不过在启动这个进程之前进行了一些特殊处理,让这个容器进入了一个全新的虚拟环境,与宿主机的环境分开, 所以这个进程及其子进程认为自己运行在一个独立的世界里面 ...
- java将一个正整数分解质因数。例如:输入90,打印出90=2*3*3*5。
首先我们的算法是:例如 输入的是 90 1.找到90的最小公约数(1除外)是 2 2.然后把公约数 2 输出 3.接着用 90 / 2 = 45 (如果这里是素数,就结束,否则继续找最小公约数) 4. ...
- Mybatis多个参数传值方法
第一种方案 DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...
- mysql安装及常见问题
下载了MySQL的压缩包,开始配置的时候遇到一大堆问题,下面记录下,也希望对遇到同样问题的你有帮助 开始将压缩包解压到指定文件夹,然后建立一个txt文件命名为my.ini,写入下面的内容 [mysql ...
- 闲聊 Exp/Imp 命令使用
1.Exp/Imp 命令可用的参数: 2.userid 参数必须跟在 Exp/Imp 命令的后面,可以省略,如 Exp Userid=用户名/密码@数据库实例名 或者 Exp 用户名/密码@数据库实例 ...
- Java入门1
一.eclipse的简单使用 1.新建项目 在package explorer的空白处点击右键,新建一个项目(new->Java Project)或者点击菜单栏的File->JavaPro ...
- [LeetCode] Find K-th Smallest Pair Distance 找第K小的数对儿距离
Given an integer array, return the k-th smallest distance among all the pairs. The distance of a pai ...