在vue页面使用JQuery ajax的token过期的主动处理

还是旧项目的的优化需求

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();