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

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

赞 (0)

相关推荐

  • SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)

    SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)

    一.需求 实现用户在浏览器登录后,跳转到其他页面,当用户在其它地方又登录时,前面用户登录的页面退出登录(列如qq挤号那种方式) 二.实现思路 用户在前端填写用户信息登录后,后台接收数据先去数据库进行判断,如果登录成功,创建map集合,以用户id为键,token为值,先通过当前登录用户的id去获取token,如果token存在说明该用户已经登录过,调用redis以token为键删除上个用户的信息,调用方法生成新token,并将token存入map集合,将用户信息存入redis,并将token存入c

  • Vue退出登录时清空缓存的实现

    如下所示: <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store.state.app.themeColor }; }, mount

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

    需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面. 创建一个.js文件,在main.js引入此js(vue框架) 在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime()); 然后在点击的时候更新这个时间 var lastTime = new Date().getTime(); var currentTime = ne

  • Vue设置长时间未操作登录自动到期返回登录页

    Vue设置长时间未操作登录以后自动到期返回登录页 首先我们写在main.js文件中 import routerUtil from "@/utils/routerutil";//先将js文件在main.js中引入 routerUtil(router); 我们会在登陆成功后调用sessionUtil文件中的setSession,sessionUtil下面写的有 import sessionUtil from '@/utils/sessionutil' sessionUtil.setSess

  • js节流防抖应用场景,以及在vue中节流防抖的具体实现操作

    故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(debounce),在网上想找个现成的用下,但是好多都不对,于是就自己搞了. 先看看概念 函数防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 函数节流(throttle)

  • vue实现用户长时间不操作自动退出登录功能的实现代码

    一.需求说明 昨天后端开发人员让我实现一个网页锁屏,当时我一头雾水,问他为啥搞的跟安卓系统一样.他的回复是"看起来帅点". 首先我们梳理下逻辑,先来个简化版的,用户长时间未操作时,返回登录页 二.思路 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出登陆,清除token,返回登录页 三.实现 [1]在util文件夹下创建一个storage.js封装localStorage方法 export default { set

  • vue中的过滤器及其时间格式化问题

    一.过滤器介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由 管道 符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId">

  • vue中的.$mount('#app')手动挂载操作

    在Vue构造函数时,需要配置一个el属性,如果没有没有el属性时,可以使用.$mount('#app')进行挂载. 配置了el属性: new Vue({ el:"#app", router }); 如果没有配置el属性,可以使用手动挂载$mount("#app") new Vue({ router }).$mount('#app'); var vm = new Vue({ router }); vm.$mount('#app'); 补充知识:Vue手动挂载组件$mo

  • 在vue中axios设置timeout超时的操作

    在做vue项目的时候,由于数据量查询比较大,所以前台调用接口数据的时候,往往要等很久,所以需要设置个超时,当超过设置时间就让向页面返回一个状态,让使用者不用一直等. 通过官网api查询,对其超时讲解不是很多,但其和Jquery中请求非常类似 Jquery请求方式 $.ajax({ url: '接口地址', type:'get', //请求方式get或post data:{}, //请求所传的参数 dataType: 'json', //返回的数据格式 timeout: 4000, //设置时间超

  • 在vue中使用eslint,配合vscode的操作

    不管是多人合作还是个人项目,代码规范是很重要的.这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性.这所谓工欲善其事,必先利其器,个人推荐 eslint+vscode 来写 vue,绝对有种飞一般的感觉. 每次保存,vscode就能标红不符合eslint规则的地方,同时还会做一些简单的自我修正.安装步骤如下: 首先安装eslint插件 安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加

  • vue print.js打印支持Echarts图表操作

    网上找的print.js做了修改,支持Echarts图表这里记录一下,不知道是哪家的代码了,我看都一样 这里是看到了两个源码 https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js https://github.com/denghao123/Print.js 以下是我修改过的 print.js // 打印类属性.方法定义 /* eslint-disable */ const Print = function (dom, opt

  • Java后端长时间无操作自动退出的实现方式

    目录 Java后端长时间无操作自动退出 使用session(最优) 使用拦截器 对于登陆长时间未操作超时退出问题 首先设置一个拦截器 然后进行配置文件 页面以及调用 页面 Java后端长时间无操作自动退出 使用session(最优) 设置session的过期时间,长时间(例如30分钟)无请求就会自动清除,达到长时间无操作自动退出的目的 server: port: 9201 session: timeout: 1800 使用拦截器 实现思路:每次请求后台时,在拦截器中刷新session,设置ses

随机推荐