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实现页面打印的三种方法
Mar 05 Javascript
jQuery参数列表集合
Apr 06 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
Node.js文件操作详解
Aug 16 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
微信小程序云开发详细教程
May 16 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
javascript常用方法汇总
2014/12/02 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
javascript常用的设计模式
2017/02/09 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
Python闭包的两个注意事项(推荐)
2017/03/20 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python实现图片插入文字
2019/11/26 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
普通简短的个人自我评价
2014/02/15 职场文书
王老吉广告词
2014/03/20 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
看上去很美观后感
2015/06/10 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js