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 ...
随机推荐
- C语言中函数返回字符串的4中方法
C语言中函数返回字符串的4中方法 函数的构成部分:返回类型.函数名称.参数.函数主体 参数:函数调用时传入的参数称为实参,函数定义时出现的参数为形参 形参的作用在于接收实参传入的值,形参和函数内部的其 ...
- Ubuntu18.04 安装TensorFlow 和 Keras
TensorFlow和Keras是当前两款主流的深度学习框架,Keras被采纳为TensorFlow的高级API,平时做深度学习任务,可以使用Keras作为深度学习框架,并用TensorFlow作为后 ...
- 简单web服务工作流程梳理
一.用户访问web基本流转过程梳理 二.web框架粗略概括
- elementui-如何同时获取多选框的label和value
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- impor ...
- itestpdf
itestpdf jar pdf
- luoguP2163 [SHOI2007]园丁的烦恼
安利系列博文 https://www.cnblogs.com/tyner/p/11565348.html https://www.cnblogs.com/tyner/p/11605073.html 题 ...
- 201871010111-刘佳华《面向对象程序设计(java)》第十二周学习总结
201871010111-刘佳华<面向对象程序设计(java)>第十二周学习总结 实验十 集合与GUI初步 实验时间 2019-11-14 第一部分:基础知识总结 第九章知识总结 1. ...
- 第九章 基于HTTP的功能追加协议
第九章 基于HTTP的功能追加协议 通过在HTTP的基础上添加新的功能来提高性能和功能. 一.消除HTTP瓶颈的SPDY SPDY(SPeeDY)目的是提高HTTP性能,缩短Web页面的加载时间(50 ...
- Python进阶-XVI 继承 单继承 多继承
一.初识继承 1.引入继承 class A(object): pass # 父类,基类,超类 class B: pass # 父类,基类,超类 class A_son(A, B): pass # 子类 ...
- postman(十二):发送携带md5签名、随机数等参数的请求
想起来之前在借助百度翻译接口做翻译小工具的时候,需要把参数进行md5加密后再传输. 而在平时的接口测试工作中难免会遇到类似这种请求参数,比如md5加密.时间戳.随机数等等.固然可以先计算出准确的参数, ...
