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 ...
随机推荐
- windows linux 通过SSH X11Forwrding 使用图形化界面
有时候,我们需要在命令行中使用远程的GUI程序,这样我们就需要x11转发的来进行访问: Linux平台下不需要特别的配置,假如我们要远程的机器是centos机器,只要做如下配置即可: #vi /etc ...
- Java中Class和单例类的作用与类成员的理解
Java中Class类的作用与深入理解 在程序运行期间,Java运行时系统始终为所有的对象维护一个被称为运行时的类型标识.这个信息跟踪着每个对象所属的类.JVM利用运行时信息选择相应的方法执行.而保存 ...
- JQuerys实现三级省市联动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- [LeetCode] 11. Container With Most Water 装最多水的容器
Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...
- Linux宝塔安装步骤
首先:先运行 X shell 一:输入命令 Centos安装命令(一般都用这个): yum install -y wget && wget -O install.sh http://d ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- QFile 打开文件,不用先判断文件名是否为空,做这多余的工作
void test_file() { QFile file(""); if (!file.open(QIODevice::WriteOnly)){ qDebug()<< ...
- 在Ubuntu18.04.2LTS上遇到的问题汇总
在Ubuntu18.04.2LTS上遇到的问题汇总 一.前言 在新版的Ubuntu上在桌面右键没有新建文档的按钮着实让人难以接受,其实只要稍微理解就能明白设计者的良苦用心,因为这样便于扩展性和自定 ...
- HttpUtility.HtmlDecode ,HttpUtility.HtmlEncode 与 Server.HtmlDecode ,Server.HtmlEncode 与 HttpServerUtility.HtmlDecode , HttpServerUtility.HtmlEncode
HtmlEncode: 将 Html 源文件中不允许出现的字符进行编码,通常是编码以下字符"<".">"."&" 等. ...
- POJ 3252 (数位DP)
###POJ 3252 题目链接 ### 题目大意:给你一段区间 [Start,Finish] ,在这段区间中有多少个数的二进制表示下,0 的个数 大于等于 1 的个数. 分析: 1.很显然是数位DP ...
