vue axios 拦截器
前言
项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。
第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢。
正文
axios的拦截器分为请求拦截器和响应拦截器两种。
我一般把拦截器写在main.js里。
mian.js
//axios请求
import Axios from "axios";
Vue.prototype.$axios = Axios;
请求拦截器
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么,例如加入token
.......
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
)
响应拦截器
axios.interceptors.response.use(
function (response) {
// 在接收响应做些什么,例如跳转到登录页
......
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
)
这两种拦截器中我只用了响应拦截器,现在我就来说说我是如何使用的。
首先说明一下,这里的状态码不是status,而是后台包在data中的(无论是成功还是失败),返回409表示用户账户过期,退到登录页,返回302表示没有权限,返回-1则是系统错误
// 拦截器,当返回状态码是409,踢出到登录页面,但所有请求都是异步的,如果在某个地方有多个请求,拦截器就会拦截多遍,弹框也会弹多次,用户体验差,
// 所以当第一次拦截成功后,后面就不需要拦截,所以在这写了个操作,
// 操作:如果第一次拦截成功,在sessionStorage中存储个标识,然后下次拦截进来时判断有没有这个标识,如果有,则不进行拦截操作,当没有拦截时将这个标识从sessionStorage中删除
Axios.interceptors.response.use(
// 成功
function(response) {
// 返回
// return response;
// alert(response.status) //成功的Status
if (response.data.code == "409"){
var kickOut = sessionStorage.getItem("kickOut");
if (kickOut == "1") {
return;
}
sessionStorage.setItem("kickOut", "1");
router.push("/");
ElementUI.MessageBox(
"账号已经在其他地方登录,请重新登录!",
"警告",
{
confirmButtonText: "确定"
}
)
} else if(response.data.code == "302"){
ElementUI.Message({
message: '没有权限!',
type:'warning'
});
}else {
sessionStorage.removeItem("kickOut");
return response;
}
},
// 失败
function(error) {
// alert(error.response.status) //失败的Status
if (error.response.data.code == "409") {
...... //和成功中的一样,可以封装成一个函数在这调用
}else if(error.response.data.code == "-1"){
ElementUI.Message({
message: '系统错误!',
type:'warning'
})
}
}
);
注意:
后台返回的status状态码302拦截不到,是因为浏览器自行根据redirectUrl进行了跳转 ,我这是后台写了个302接口,返回值中给我放的302,如图所示
总结:
以上就是本文的全部内容了,希望对遇到该问题的猿们有所帮助,也希望大家多多支持本码农,如有问题,请留言!
vue axios 拦截器的更多相关文章
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue --- axios拦截器+form格式请求体
在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...
- vue axios拦截器的封装
// request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...
- vue axios拦截器介绍
关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...
- vue axios拦截器加全局loading
import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...
- vue导航守卫和axios拦截器的区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- axios拦截器搭配token使用
在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...
随机推荐
- CF1242B. 0-1 MST
题目大意 有一个n个点的完全图,上面有m条边的权值为1,其余为0 求MST n,m<=10^5 题解 方法一: 维护一个点集,表示当前MST中的点 一开始任意加一个点 对于一个未加入的点,如果和 ...
- Sql server时间转时间long
DATEDIFF( S, '1970-01-01 00:00:00', a.endor_date ) - 8 * 60*60 ) actionTime, SELECT DATEADD(S,116070 ...
- 2019前端面试题汇总(vue)
毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道路上我只能独自摸索.老板也只会画饼充饥,前途一片迷茫看不到任何希望.于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该 ...
- ORA-00346,借助_allow_resetlogs_corruption开库
Mon Aug 06 10:15:08 2018Errors in file /data/app/oracle/diag/rdbms/prod/prod/trace/prod_ora_6831.trc ...
- websocket 无需通过轮询服务器的方式以获得响应 同步在线用户数 上线下线 抓包 3-way-handshake web-linux-shell 开发
https://code.google.com/archive/p/phpwebsocket/source/default/source The WebSocket API (WebSockets) ...
- ContentProvider,ContentResolver和ContentObserver 使用
1 ContentProvider内容提供者 四大组件之一,实现不同程序实现数据的共享.联系人应用就使用了ContentProvider,比如你在自己的应用可以读取和修改联系人的数据(获得相应权限). ...
- scrapy Pipeline使用twisted异步实现mysql数据插入
from twisted.enterprise import adbapi class MySQLAsyncPipeline: def open_spider(self, spider): db = ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_4_字节输出流写入数据到文件
数据由内存写入到硬盘中 构造函数传的路径是一个相对路径.有异常需要捕获异常 释放资源 这三个方法,都有异常 IO异常是父类,所以这里只需要抛出IO异常就可以了. 运行程序.目录内多了个a.txt文件 ...
- lua-resty-kafka erro xxxx could not be resolved (3: Host not found)
问题:使用 lua-resty-kafka 向 kafka 发送数据失败,报错如下: slave6 could not be resolved (: Host not found) 配置信息: lua ...
- Iview 启动报错 TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
解决 fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {}); 替换为 fs.write(fd, buf, 0, ...