还是旧项目的的优化需求
1.需要vue逐步替代jsp页面,jsp使用的是iframe,vue使用的是路由映射,同在tab框里面
2.旧版jsp代码有处理token过期的删除loginToken和跳转到登录页
3.而新版没有做token过期的处理
需求:完成vue页面的token过期处理
vue页面还是使用JQuery的ajax请求,这个是之前项目移植的,不要问为什么不用axios,我也不知道
所以并没有办法使用axios封装好的请求拦截器
有利条件:
1.在getUserInfo接口可以获取到token具体过期的事件,并且已经存到Cookies里面了
2.可以使用JQuery封装ajax的$.ajaxSetup中的beforeSend方法(发送请求之前的回调函数,返回)
使用的ajax全局的请求代码
import CONF from './config';
import util from './util';
// 主动处理vue页面token超时问题
export default function beforeSend() {
$.ajaxSetup({
beforeSend(xhr) {
let outTime;
// 判断当前网页token是否过期
const userInfo = JSON.parse(window.localStorage.getItem('value'));
const loginToken = util.getCookie('loginToken');
if (userInfo && loginToken) {
// 本地有用户信息并且有token
const loginExpireTime = new Date(userInfo.loginExpireDate).getTime(); //限定的时间戳
const newTime = new Date().getTime(); //现在的时间戳
outTime = newTime < loginExpireTime;
if (outTime) {
return true;
} else {
util.delCookie('loginToken')// 删除logintoken
window.location.href = CONF.BASE_URL + '/login'; //跳转到登录页
return false; // 阻止请求
}
}
},
error(xhr, status, error) {
window.console.log(error);
if (error == 'Forbidden') {
alert('请先登录');
location = CONF.BASE_URL + '/login';
}
}
});
}
在main.js里面调用
// 这里请求都要经过各个函数
import beforeSend from '@/api/common/beforeSend';
beforeSend();