uniapp 长时间不操作,自动退出登录页

store 下的inex.js文件

javascript 复制代码
import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		// 记录最后一次点击时间的元素
		lastTime: new Date().getTime(),
	},
	mutations: {
		//点击事件调用,刷新最后一次点击时间
		lastTimeUpdata: (state, lastTime) => {
			state.lastTime = lastTime;
		}
	},
	actions: {}
})
export default store

time.js

javascript 复制代码
import store from '../store/index.js';
export const timeOut = () => {
	let WebviewList = [];
	// 上一次点击时间
	let lastTime = null
	// 当前时间
	let currentTime = null
	// 超时时间【可以自己设置】
	// let sys_timeout = 5 * 1000
	let sys_timeout = 30 * 60 * 1000
	// 每隔多长时间检查是否超时【可以自己设置】
	let check_time = 1000
	// 计时器【此为功能实现的方法,现在为空】	
	let goOut = null
	const isTimeOut = () => {
		// 页面上一次的点击时间
		lastTime = store.state.lastTime
		currentTime = new Date().getTime()
		// 超时了
		if ((currentTime - lastTime) > sys_timeout) {
			return true;
		} else {
			return false;
		}
	}
	const isLoginOut = () => {
		clearInterval(goOut);
		//setInterval方法来确定多长时间检测一次有没有超时
		goOut = setInterval(() => {

			// #ifdef APP-PLUS
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var currentWebview = page.$getAppWebview();
			// console.log(currentWebview); //获得当前webview的id

			// 判断一下是否超时,如果超时了就退出
			if (isTimeOut()) {
				if (currentWebview.__uniapp_route != 'pages/index/index') {
					// 需要转到的页面【这里用你自己的跳转方法和地址】
					uni.reLaunch({
						url: `/pages/index/index`,
					});
				}
				//已经超时跳转到相应界面,不需要计时了
				// clearInterval(goOut)
			} else {

			}
			let flag = false;
			for (let webview of WebviewList) {
				if (webview.__uniapp_route == currentWebview.__uniapp_route) {
					flag = true;
				}
			}
			if (!flag) {
				WebviewList.push(currentWebview);
				currentWebview.addEventListener('touchstart', function() {
					console.log('点击了');
					store.commit('lastTimeUpdata', new Date().getTime());
				}, false);
				currentWebview.addEventListener('close', function() {
					// console.log('关闭了');
					for (var i = 0; i < WebviewList.length; i++) {
						if (WebviewList[i].__uniapp_route == currentWebview
							.__uniapp_route) {
							WebviewList.splice(i, 1);
						}
					}
				}, false);
			}

			// #endif

			// #ifdef H5
			if (isTimeOut()) {
				// 需要转到的页面【这里用你自己的跳转方法和地址】
				uni.reLaunch({
					url: `/pages/index/index`,
				});
				//已经超时跳转到相应界面,不需要计时了
				// clearInterval(goOut)
			}
			// #endif


		}, check_time);
	}
	isLoginOut();
}

main.js 挂载全局

javascript 复制代码
import store from './store/index.js'
Vue.prototype.$store = store

app.vue文件引用

javascript 复制代码
<script>
import { timeOut } from './common/time.js';
export default {
	onLaunch: function() {
		let that = this;
		console.log('App Launch');
		timeOut();
		// #ifdef H5
		// /* 实现全局点击事件监听 */
		setTimeout(function() {
			var body_ = document.getElementsByTagName('body')[0];
			body_.addEventListener('click', function() {
				that.$store.commit('lastTimeUpdata', new Date().getTime());
			});
		}, 1000);
		// #endif
	},
	onShow: function() {
		console.log('App Show');
	},
	onHide: function() {
		console.log('App Hide');
	}
};
</script>
相关推荐
caimouse19 小时前
reactos编码规范
c语言·开发语言
xieliyu.1 天前
Java算法精讲:双指针(三)
java·开发语言·算法
CryptoPP1 天前
快速对接东京证券交易所API数据:实战指南与代码示例
开发语言·人工智能·windows·python·信息可视化·区块链
ZC跨境爬虫1 天前
跟着 MDN 学JavaScript day_7:数学运算与逻辑判断实战测试
开发语言·前端·javascript·学习·ecmascript
凌云拓界1 天前
文件管理:让AI安全操作你的电脑 ——CogitoAgent开发实战(三)
javascript·人工智能·架构·开源·node.js
凌云拓界1 天前
联网能力:让AI看见更广阔的世界 ——CogitoAgent开发实战(四)
javascript·人工智能·架构·node.js·创业创新
阳区欠1 天前
【LangChain】LLM基础介绍
开发语言·python·langchain
Jinkxs1 天前
Java 跨域14-Java 与区块链(Hyperledger)集成
java·开发语言·区块链
HYCS1 天前
用pixi.js实现fabric.js(六):从线性代数的角度理解编辑器交互
前端·javascript·canvas
晨曦中的暮雨1 天前
Golang速通(Javaer版)
java·开发语言·后端·golang