vue定时器+弹框 跳到登陆页面

1.做一个请求拦截，并弹框提示几秒后，跳转到登陆首页或是点击确定之后直接跳转
拦截用了this.$axios.interceptors.response
页面上的弹框组件用了vux的组件
vux地址：https://doc.vux.li/zh-CN/

<confirm v-model="errorsToken"
         theme="android"
         confirm-text="确定"
         :show-cancel-button="false"
         @on-confirm="$router.push({path: '/'})">
    <p style="font-size: .34rem">令牌已过期,请重新登录（3秒后自动跳到登陆页面）</p>
</confirm>

拦截
this.$axios.interceptors.response.use((response) => {
    afterLoad.push(response);
    if (response.data && response.data.msg === 'error_landed') {
        this.errorsTip = true;
        this.$router.push({path: '/'});
    }
    if (response.data && (response.data.status === 'error' && response.data.msg === 'ERROR_TOKEN_INVALID') && response.config.url.indexOf('/app/login') < 0) {
        source.cancel('请求失败请重新登入');
　　　　　// 用于开启弹框的confirm组件
        this.errorsToken = true;
        if (!this.timer) {
            this.timer = setInterval(() => {
                clearInterval(this.timer);
                this.timer = null;
                // 用于开启弹框

                this.errorsToken = false;
                //跳转的页面写在此处
                this.$router.push({path: '/'});
            }, 3000);
            if (this.errorsToken === false) {
                this.$router.push({path: '/'});
            }
        }

        CancelToken = this.$axios.CancelToken;
        source = CancelToken.source();
        window.sessionStorage.clear();
        window.localStorage.clear();
        return response;
    }
    if (afterLoad.length === berferLoad.length) { //加载全部完成后
        loadingEnd();
    }
    return response;
}, (error) => {

    //对响应错误做点什么
    CancelToken = this.$axios.CancelToken;
    source = CancelToken.source();
    return Promise.reject(error);
});

效果

 

转载于:https://www.cnblogs.com/d0minic/p/11281977.html