像这样得提示很多边很烦那么
问题原因
当用户时间长了不操作时再次请求就会被后端认为token过期了需要重新登录,请求不到数据所以对用户进行提示,但是由于那个页面请求了多次不同的数据所以提示过多
问题分析
像这样肯定是请求出的问题所以我们往请求方面得文件去找,我这里是请求拦截这个文件出现得问题
import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken, removeToken, getType, removeType } from "@/utils/auth";
window.axiosCancel = []
// import { Decrypt, Encrypt } from "./utils.js";
// create an axios instance
// import qs from "qs";
axios.defaults.headers.post["Content-Type"] = "application/json;";
// import baseURL from "../main";
const service = axios.create({
baseURL:"http://123221312/api/"
// baseURL: "/api" //打包线上地址
// baseURL: '/', // url = base url + request url
// withCredentials: true // send cookies when cross-domain requests
// timeout: 100000 // request timeout
});
console.log(axios.create({ baseURL: "http://124.88.68.242:9001/api/" }));
service.interceptors.request.use(config => {
// let str = config.url;
// // console.log(str.split('/'));
config.cancelToken = new axios.CancelToken(cancel => {
window.axiosCancel.push({ cancel });
})
if (store.getters.token) {
config.headers["token"] = store.getters.token;
} else {
console.log("无token");
}
// if (
// Object.prototype.toString.call(config.data) !== "[object FormData]" &&
// config.method === "post"
// ) {
// // 请求拦截器处理
// config.data = qs.stringify(config.data);
// }
// if (str.split("=")[1]) {
// config.url = str.split("=")[0] + "=" + Encrypt(str.split("=")[1]);
// }
return config;
});
// response interceptor响应拦截器
var flag = true;
watch: {
flag: {
if (!flag) {
console.log("当");
Message({
type: "error",
message: "请重新登录",
offset: 200
});
}
}
}
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data;
// console.log(res,'111')
if (res.status == 200) {
if (res.data) {
flag = true
if (res.p) {
// res.data = JSON.parse(Decrypt(res.data));
return res;
} else {
// console.log( JSON.parse(Decrypt(res.data)))
// return JSON.parse(Decrypt(res.data));
return res;
}
} else {
return res;
}
} else if (res.status == 300) {
return res;
} else {
console.log(res, "111");
if (res.status == 401) {
localStorage.setItem("zhtoken", "");
store.dispatch("user/resetToken");
console.log("退出登录");
location.href = "/#/login";
flag = false;
console.log("将flag变为false");
}
// Message.error(res.msg);
return "";
}
},
error => {
console.log("err" + error); // for debug
Message({
type: "error",
message: res.msg,
offset: 200
});
return Promise.reject(error);
},
);
setTimeout(() => {
if (flag) {
console.log(true);
} else {
console.log(false);
Message({
type: "error",
message: "请重新登录",
offset: 200
});
flag = true
}
}, 2000)
export default service;
代码分析先定义一个值如果失败之后改变值得状态然后进行提示至于为什么在setTimeout延时里就只提示一次我也不知道希望有大佬评论一下大家一起学习
其实我本来是想用计算属性得但是没有成功