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与DropDownList 区别分析
Jan 01 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
php 调用远程url的六种方法小结
2009/11/02 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
Python求解正态分布置信区间教程
2019/11/20 Python
python 消费 kafka 数据教程
2019/12/21 Python
Python socket聊天脚本代码实例
2020/01/02 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
css3中transition属性详解
2014/09/02 HTML / CSS
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
给护士表扬信
2014/01/19 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
催款通知书范文
2015/04/17 职场文书
借条如何写
2015/05/26 职场文书
2016党校学习心得体会
2016/01/07 职场文书