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 ...
随机推荐
- js 时间戳转yyyy-MM-dd HH-mm-ss工具类
转载自:https://blog.csdn.net/shan1774965666/article/details/55049819 在web开发中,我们经常需要用js将时间戳转yyyy-MM-dd H ...
- java.sql.Date赋值给了java.util.Date.转化成JSONArray时出错net.sf.json.JSONException: java.lang.reflect.InvocationTargetException
net.sf.json.JSONException: java.lang.reflect.InvocationTargetExceptionat net.sf.json.JSONObject.defa ...
- selenium截取元素
http://www.mamicode.com/info-detail-2161474.html 常见问题 https://blog.csdn.net/u010616442/article/detai ...
- Linux下怎么启动、停止和重启MySQL
一.启动方式 使用linux命令service 启动:service mysqld start 使用 mysqld 脚本启动:/etc/inint.d/mysqld start 使用 safe_mys ...
- 【声明式事务】Spring声明式事务实现(三)
以MyBatis为例. 一.基于注解的声明式事务配置 1. 添加tx名字空间 xmlns:tx="http://www.springframework.org/schema/tx" ...
- Moving x86 assembly to 64-bit (x86-64)
While 64-bit x86 processors have now been on the market for more than 5 years, software support is o ...
- go 通过select实现超时
package main import ( "fmt" "time" ) func main() { ch := make(chan int) quit := ...
- Paper | Beyond a Gaussian Denoiser: Residual Learning of Deep CNN for Image Denoising
目录 故事背景 网络结构 BN和残差学习 拓展到其他任务 发表在2017 TIP. 摘要 Discriminative model learning for image denoising has b ...
- 大话OI
本文将收录一切我认为对我十分有帮助的他人的博文以及我认为有价值的我自己的原创文章. 引言 有人说:程序=算法+数据结构,所以OI=程序=算法+数据结构. 在我看来,这句话的前半句是对的,但后半句则有本 ...
- Token认证,如何快速方便获取用户信息
背景 我们有一个Web项目,这个项目提供了很多的Rest API.也做了权限控制,访问API的请求必须要带上事先认证后获取的Token才可以. 认证的话就在Filter中进行的,会获取请求的Token ...
