步骤一、写js方法
写js方法并暴露出去
export function isOperateFun() {}
核心逻辑:记录当前时间,更新每次操作时的时间,计算:当前时间- 最后操作时间 > 限定时间,如果大于就是长时间未操作
这个js方法会在页面加载成功后就执行,故需要一开始就加载定时器,而后每次触发事件后清除原来的定时器并重新开始
// 用户长时间未操作 退出登录
import store from '@/store'
import router from '@/router'
var timer = null
clearInterval(timer)
export function isOperateFun() {
var lastTime = new Date().getTime() // 最后一次点击时间
var currentTime = new Date().getTime() // 当前时间
var timeOut = 66 * 1000 // 允许最长未操作时间
var i = 1 // 辅助作用
function handleReset() { // 重新赋值最后一次点击时间,清除定时器,重新开始定时器
// console.log('又点击了!!!!!!')
i = 1
lastTime = new Date().getTime()
if (timer) {
clearInterval(timer)
timer = null
}
if (!timer) {
// console.log('真好!重新开始')
handleInterval()
}
}
document.onclick = () => { // 单击事件
handleReset()
}
document.ondblclick = () => { // 双击事件
handleReset()
}
document.onmousedown = () => { // 按下鼠标键时触发
handleReset()
}
document.onmouseup = () => { // 释放按下的鼠标键时触发
handleReset()
}
document.onmousemove = () => { // 鼠标移动事件
handleReset()
}
document.onmouseover = () => { // 移入事件
handleReset()
}
document.onmouseout = () => { // 移出事件
handleReset()
}
document.onmouseenter = () => { // 移入事件
handleReset()
}
document.onmouseleave = () => { // 移出事件
handleReset()
}
function handleInterval() { // 定时器
timer = setInterval(() => {
currentTime = new Date().getTime() // 当前时间
console.log(`${i++}-currentTime`, currentTime)
console.log('最后一次点击时间', lastTime)
if (currentTime - lastTime > timeOut) {
console.log('长时间未操作')
clearInterval(timer) // 清除定时器
store.dispatch('user/logout').then(() => { // 执行退出并跳转到首页
const path = window.location.href.split('#')[1]
if (path !== '/home') { // 判断当前路由不是首页 则跳转至首页
router.push('/home')
}
window.AndroidWebView.loginOut() // 执行安卓退出方法
})
}
}, 1000)
}
handleInterval() // 一开始程序 默认执行定制器
}
步骤二、在app.vue中调用js方法
引入外部js方法import { isOperateFun } from '@/utils/isOperate.js'
执行方法isOperateFun()
<script>
import { isOperateFun } from '@/utils/isOperate.js'
export default {
data() {
return {
}
},
created() {
isOperateFun()
},
methods: {
}
}
</script>