Vue学习笔记：实现单页长时间不操作自动退出登录清除token,返回登录页

本文主要是介绍Vue学习笔记：实现单页长时间不操作自动退出登录清除token,返回登录页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 需求：实现单页长时间不操作自动退出登录清除token,返回登录页

根据需求的思路是：每次操作页面时候存储当前时间，当前时间与存储时间比较，是否超过设定的时间，超过就退出登录，返回登录页

第一步：在until文件夹中新建 astrict.js

//单页长时间不操作就会自动退出var lastTime = new Date().getTime()
var currentTime = new Date().getTime()
var timeOut = 1 * 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*)#/);console.log(newUrl);sessionStorage.clear()window.open('/login','_self');}
}/* 定时器 间隔30秒检测是否长时间未操作页面 */
window.setInterval(checkTimeout, 30000);

第二步：在main.js 中导入

import Astrict from './assets/js/astrict.js'Vue.use(Astrict)

根据以上操作即可实现该需求。。。。

这篇关于Vue学习笔记：实现单页长时间不操作自动退出登录清除token,返回登录页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---