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);
}); 效果
 

vue定时器+弹框 跳到登陆页面的更多相关文章

  1. vue编辑、新增弹框(引用外部页面)

    vue编辑.新增弹框(引用外部页面) 2018年06月15日 09:37:20 会飞的猪biubiu 阅读数 10265    版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  2. session超时跃出iframe并跳到登陆页面(转载)

    session超时跳出iframe并跳到登陆页面 在网页编程时,我们经常需要处理,当session过期时,我们要跳到登陆页面让用户登陆,由于我们可能用到IFrame框架,所以我们我登陆页面需要显示在整 ...

  3. 一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面

    SpringBoot springboot的目的是为了简化spring应用的开发搭建以及开发过程.内部使用了特殊的处理,使得开发人员不需要进行额外繁锁的xml文件配置的编写,其内部包含很多模块的配置只 ...

  4. session 超时跳转登陆页面

    /** * session超时跳转登陆页面 * @author zhangdong * 2017年10月24日 */ @Aspect @Component public class SessionTi ...

  5. 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

    弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...

  6. 如何优雅的写一个Vue 的弹框

    写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...

  7. vue自定义弹框

    vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...

  8. 解决关闭app权限弹框后无法识别页面对象问题

    在使用appium进行安卓端app的自动化测试,我碰到这样下面这几个问题: 1.每次启动我的待测app时总会提示app权限 2.关闭完权限后,无法识别页面对象 第一个问题的解决,我更换不同的真机进行测 ...

  9. 基于Vue的弹框实例

    看到博客的人,请养成写博客的习惯,不会不会,就怕曾经会过,现在想不起来了,一起加油....................  让学习真的成为一种习惯,同时要注意身体 <!DOCTYPE html ...

随机推荐

  1. Python—运算符的类型

    Python语言支持以下类型的运算符 算术运算符 比较运算符 赋值运算符 逻辑运算符 位运算符 成员运算符(in / not in) 身份运算符(is / is not) Python算术运算符 运算 ...

  2. 在宿主机上执行docker容器内部的shell或程序

    为了避免反复进入docker容器内部操作,可以将一系列容器内部的指令由宿主机来操作完成. 在宿主机(作者主机为windows7)上执行centos容器(name为centos-1)中/usr目录下的“ ...

  3. CUDA -- 规约求矩阵的行和

    求矩阵每行的和? 可以把每行放入一个不同线程块,这样行与行之间进行粗粒度的并行.而对于每行,其对应的线程块中分配n个线程(对应行宽),使用共享存储器,让每个线程从显存中读取一个数至shared mem ...

  4. luoguP3242 [HNOI2015]接水果

    题意 考虑整体二分. 考虑路径\((x,y)\)被路径\((u,v)\)包含需要满足什么条件: 设\(dfn_x\)表示\(x\)的\(dfs\)序,\(low_x=dfn_x+size_x-1\), ...

  5. go 爬虫

    package main import ( "fmt" "io" "io/ioutil" "net/http" &quo ...

  6. babel速览

    babel babel初衷 在es6出现之后,由于此版本的巨大改变,给人们带来了很多革命性的技术支持,但是当时很多浏览器对es6支持有限,babel就是为了达到写最新的语法,可以在任意浏览器运行而出现 ...

  7. 消息队列的使用<一>:介绍、使用场景和JMS概念知识

    目录 介绍 消息队列的理解 举个栗子 使用场景 消息队列的模型与概念理解 JMS模型 基本概念: 内容: JMS定义的消息结构: PTP式消息传递 PUB/SUB式消息传递 可靠性机制 事务 消息持久 ...

  8. Flutter基础系列之混合开发(二)

    1.混合开发的场景 1.1作为独立页面加入 这是以页面级作为独立的模块加入,而不是页面的某个元素. 原生页面可以打开Flutter页面 Flutter页面可以打开原生页面 1.2作为页面的一部分嵌入 ...

  9. pycharm python @符号不能识别 NameError: name 'app' is not defined

    pycharm python @符号不能识别 NameError: name 'app' is not defined 解决办法: 缺少:app = Flask(__name__) # 导入Flask ...

  10. D3力布图绘制--在曲线路径上添加文本标记

    今天遇到一个在曲线路径上标识文本标记的问题,找到一个比较好的解决思路,在这里分享下: 使用d3建立的Force Layout,加上自定义的箭头形状,将多条连接线线改成弧线(https://www.cn ...