美文网首页前端Vue
axios token验证过期,发送多次请求,导致消息多次提示

axios token验证过期,发送多次请求,导致消息多次提示

作者: Cherry丶小丸子 | 来源:发表于2021-04-24 12:50 被阅读0次

axios.js

响应拦截器中如果返回 401 执行以下方法
/** 
 * 跳转登录页
 * 携带当前页面路由,在登录页面完成登录后返回当前页面
 */
const loginOut = () => {
    if(window.localStorage.loginOut == 'false' || window.localStorage.loginOut == undefined){ // 解决:token验证过期,发送多次请求,导致消息多次提示
        window.localStorage.loginOut = 'true'; // 更改状态,防止发送多次请求,导致消息多次提示
        MessageBox.alert('登陆状态已过期,请重新登录', '提示', {
            lockScroll: true,
            confirmButtonText: '确定',
            closeOnClickModal: false,
            closeOnPressEscape: false,
            callback:() => {
                router.replace({
                    path: '/',
                    query: {
                        redirect: router.currentRoute.fullPath
                    }
                });
                window.localStorage.removeItem('zsyftxglptMh');
            }
        });
    }
}

login.vue

let params = {
    username: 'username',
    password: 'password'
}
this.$axios.login(params).then(res => {
    let resData = res.data;
    let userInfo = {
        userId: resData.data.user.id,
        userName: resData.data.user.name,
        token: resData.data.user.token
    }
    // 用户信息 设置 缓存
    window.localStorage.zsyftxglptMh = JSON.stringify(userInfo);
    // 获取 最新 token 之后,将 loginOut 设置为 false,以便下次 token 失效后,再次执行 响应拦截器(跳转登录页)
    window.localStorage.loginOut = 'false';
});

相关文章

网友评论

    本文标题:axios token验证过期,发送多次请求,导致消息多次提示

    本文链接:https://www.haomeiwen.com/subject/weokrltx.html