uniapp超时未操作退出登录,兼容app和h5端

200 阅读1分钟

1.新建store文件夹,新建index.js,写入代码

store/index.js

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

2.在main.js中引入store

import store from './store/index.js'
Vue.prototype.$store = store

3.在common中创建timeout.js,写入代码

import store from '../store/index.js';
export const timeOut = () => {
	let WebviewList = [];
	// 上一次点击时间
	let lastTime = null
	// 当前时间
	let currentTime = null
	// 超时时间【可以自己设置】
	// let sys_timeout = 10 * 1000
	let sys_timeout = 60 * 10 * 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/Login/index') {
					// 需要转到的页面【这里用你自己的跳转方法和地址】
					uni.reLaunch({
						url: `/pages/Login/index`,
					});
				}else{
					//已经超时跳转到登录界面,不需要计时了
					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()) {
				// console.log(2,currentWebview.__uniapp_route)
				// 需要转到的页面【这里用你自己的跳转方法和地址】
				uni.reLaunch({
					url: `/pages/Login/index`,
				});
				//已经超时跳转到相应界面,不需要计时了
				clearInterval(goOut)
			}
			// #endif


		}, check_time);
	}
	isLoginOut();
}

4.在主界面中调用timeOut事件 pages/menu/index.vue

onShow(){
    timeOut(){
        // #ifdef H5
        // /* 实现全局点击事件监听 */
        let that = this;
        setTimeout(function() {
                var body_ = document.getElementsByTagName('body')[0];
                body_.addEventListener('click', function() {
                        that.$store.commit('lastTimeUpdata', new Date().getTime());
                });
        }, 1000);
        // #endif
    } 
}