zoukankan      html  css  js  c++  java
  • 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);
    });

    效果
     
  • 相关阅读:
    dfssvc.exe
    我左边的公告
    再做了一个LOGO
    做一个调查,请大家帮忙
    如果年三十没有人陪我
    我喜欢这个模版
    cisvc.exe是什么服务
    IIS与SQL服务器安全加固
    终于申请到了blogs
    重发LOGO
  • 原文地址:https://www.cnblogs.com/d0minic/p/11281977.html
Copyright © 2011-2022 走看看