vue中js判断长时间不操作界面自动退出登录(推荐)


Posted in Javascript onJanuary 22, 2020

需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面。

创建一个.js文件,在main.js引入此js(vue框架)

在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime());

然后在点击的时候更新这个时间

var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 30 * 60 * 1000; //设置超时时间: 30分
 
window.onload = function () {
  window.document.onmousedown = function () {
    localStorage.setItem("lastTime",new Date().getTime());
  }
};
function checkTimeout() {
  currentTime = new Date().getTime(); //更新当前时间
  lastTime = localStorage.getItem("lastTime");
  // console.log(currentTime - lastTime);
  // console.log(timeOut);
  if (currentTime - lastTime > timeOut) { //判断是否超时
    // console.log("超时");
    var url = window.location.href;
    var newUrl=url.match(/(\S*)#/)[1];
    
    window.open(newUrl + '#/login','_self');
  }
}
 
/* 定时器 间隔30秒检测是否长时间未操作页面 */
window.setInterval(checkTimeout, 30000);

每隔30s去检查一下是否过了30分钟。

总结

以上所述是小编给大家介绍的vue中js判断长时间不操作界面自动退出登录,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
jquery实现拖动效果
Aug 10 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
JS图片预加载插件详解
Jun 21 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 #Javascript
JavaScript设计模型Iterator实例解析
Jan 22 #Javascript
Vue开发环境跨域访问问题
Jan 22 #Javascript
vue中英文切换实例代码
Jan 21 #Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 #Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 #Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 #Javascript
You might like
PHP4实际应用经验篇(5)
2006/10/09 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
js原生日历的实例(推荐)
2017/10/31 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
python中管道用法入门实例
2015/06/04 Python
matplotlib绘制动画代码示例
2018/01/02 Python
tensorflow更改变量的值实例
2018/07/30 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
简单了解python反射机制的一些知识
2019/07/13 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Python定时器线程池原理详解
2020/02/26 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python基于win32api实现键盘输入
2020/12/09 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
外贸业务员工作职责
2014/01/06 职场文书
给交警的表扬信
2014/01/12 职场文书
中考冲刺决心书
2014/03/11 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
战马观后感
2015/06/08 职场文书
导游词之无锡唐城
2019/12/12 职场文书