欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2021-06-04 07:53:39|栏目:vue|点击:

需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用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判断长时间不操作界面自动退出登录,希望对大家有所帮助!

上一篇:Vue.js 中的 v-model 指令及绑定表单元素的方法

栏    目:vue

下一篇:Vue.js的复用组件开发流程完整记录

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

本文地址:http://www.codeinn.net/misctech/135050.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有