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);
}); 效果
vue定时器+弹框 跳到登陆页面的更多相关文章
- vue编辑、新增弹框(引用外部页面)
vue编辑.新增弹框(引用外部页面) 2018年06月15日 09:37:20 会飞的猪biubiu 阅读数 10265 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
- session超时跃出iframe并跳到登陆页面(转载)
session超时跳出iframe并跳到登陆页面 在网页编程时,我们经常需要处理,当session过期时,我们要跳到登陆页面让用户登陆,由于我们可能用到IFrame框架,所以我们我登陆页面需要显示在整 ...
- 一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面
SpringBoot springboot的目的是为了简化spring应用的开发搭建以及开发过程.内部使用了特殊的处理,使得开发人员不需要进行额外繁锁的xml文件配置的编写,其内部包含很多模块的配置只 ...
- session 超时跳转登陆页面
/** * session超时跳转登陆页面 * @author zhangdong * 2017年10月24日 */ @Aspect @Component public class SessionTi ...
- 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)
弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...
- 如何优雅的写一个Vue 的弹框
写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...
- vue自定义弹框
vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...
- 解决关闭app权限弹框后无法识别页面对象问题
在使用appium进行安卓端app的自动化测试,我碰到这样下面这几个问题: 1.每次启动我的待测app时总会提示app权限 2.关闭完权限后,无法识别页面对象 第一个问题的解决,我更换不同的真机进行测 ...
- 基于Vue的弹框实例
看到博客的人,请养成写博客的习惯,不会不会,就怕曾经会过,现在想不起来了,一起加油.................... 让学习真的成为一种习惯,同时要注意身体 <!DOCTYPE html ...
随机推荐
- day35作业
1. 查询所有大于60分的学生的姓名和学号 (DISTINCT: 去重) -- 2.查询每个老师教授的课程数量 和 老师信息 -- 3. 查询学生的信息以及学生所在的班级信息 -- 4.学生中男生的个 ...
- Web服务器—Nginx
Nginx常用命令: 启动nginx服务 [root@localhost ~]# service nginx start [root@localhost ~]# systemctl start ngi ...
- 16.Linux-LCD驱动(详解)【转】
转自:https://www.cnblogs.com/lifexy/p/7604011.html 在上一节LCD层次分析中,得出写个LCD驱动入口函数,需要以下4步: 1) 分配一个fb_info结构 ...
- v-bind是是否需要绑定某一个类名
v-bind 结合 css样式 结合标签显示是否要显示出某个样式 <p :class="['bg','dx', {'lin':falg}]">{{ msg }}< ...
- mybatis与hibernate的区别持久层对比【面试题】
Mybatis技术特点: 好处: 通过直接编写SQL语句,可以直接对SQL进行性能的优化: 学习门槛低,学习成本低.只要有SQL基础,就可以学习mybatis,而且很容易上手: 由于直接编写SQL语句 ...
- 【洛谷P1963】[NOI2009]变换序列(二分图匹配)
传送门 题意: 现有一个\(0\)到\(n-1\)的排列\(T\),定义距离\(D(x,y)=min\{|x-y|,N-|x-y|\}\). 现在给出\(D(i, T_i)\),输出字典序最小的符合条 ...
- ACM-冒泡排序
将多组输入数据进行冒泡排序,并去除相同的数据 #include <iostream> #include <vector> using namespace std; void R ...
- 好用的代码统计小工具SourceCounter(下载)
SourceCounter下载链接 https://pan.baidu.com/s/12Cg51L0hRn5w-m1NQJ-Xlg 提取码:i1cd 很多时候我们需要统计自己所写的代码的数量.举个栗子 ...
- 改名移动批量文件 shutil.copy
import glob import os import shutil filePath = 'F:/project/Breast/InBreast/INBreast/imgout/' newFile ...
- The Python Debugger Pdb
Python Debugger pdb The Python Debugger Pdb 可以直接在命令行中启动,调试程序 也可以写在代码中 命令行使用 可以直接在命令行指定要进行调试的程序 pytho ...
