前言
项目中需要验证登录用户身份是否过期，是否有权限进行操作，所以需要根据后台返回不同的状态码进行判断。
第一次使用拦截器，文章中如有不对的地方还请各位大佬帮忙指正谢谢。
正文
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则是系统错误（这些状态码不是Status）
// 拦截器，当返回状态码是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，如图所示
总结：
以上就是本文的全部内容了，希望对遇到该问题的猿们有所帮助，也希望大家多多支持本码农，如有问题，请留言！