vue用户长时间未操作 退出登录 返回首页

1.在utils下新建isOperate.js

// 用户长时间未操作 退出登录    
import store from '../store'
import router from '../router'
var timer = nullclearInterval(timer)export function isOperateFun(callback) {//callback做一个回调，在本js里处理不用写回调var lastTime = new Date().getTime() // 最后一次点击时间var currentTime = new Date().getTime() // 当前时间var timeOut = 60 * 1000 // 允许最长未操作时间var i = 1 // 辅助作用function handleReset() { // 重新赋值最后一次点击时间，清除定时器，重新开始定时器// console.log('又点击了！！！！！！')i = 1store.dispatch('setTimeoutNum', 60)//这是项目需要写一个60s倒计时退出登录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) // 清除定时器//本js里处理// const path = router.app.$route.path//获取当前页面// console.log('path----------',router.app.$route.path)// if (path !== '/') { // 判断当前路由不是首页 则跳转至首页//     router.push('/')// }else{// //    router.go(0)//页面刷新// }//app.vue里使用，首页使用if (callback) callback(false);//false长时间未操作}else {if (callback) callback(true);//true用户在操作}}, 1000)}handleInterval() // 一开始程序 默认执行定制器
}

2.app.vue里引入

引入
import { isOperateFun } from '@/utils/isOperate.js'created() {const self = thisisOperateFun(function(isOperate){self.handleTimeout(isOperate)})},methods: {handleTimeout(isOperate) { console.log('handleTimeout---------', isOperate)if (!isOperate) { // 长时间未操作处理this.$cookieStore.delCookie('user_token')this.$cookieStore.delCookie('user_names')if (this.$route.path != '/') { // 非首页this.$router.push('/')}}else {//store里设置的倒计时参数this.$store.dispatch('setTimeoutNum', this.$store.getters.timeoutNum - 1)}//store里设置isOperate首页里使用 true用户在操作  false长时间未操作处理this.$store.dispatch('setIsOperate', isOperate)}}

3.首页----因为项目首页判断比较多，使用刷新页面（location.reload();  this.$router.go(0); 前两种效果不好   inject方法  跳转页面面组织不了接口定时的接口请求）所以要使用该方法，长时间未操作在首页时手动关闭页面上的方法弹窗

首页html:
<span>{{$store.getters.timeoutNum}}S后自动退出</span>//60秒后自动退出watch里监听isOperatewatch: { '$store.getters.isOperate': function(newVal) {console.log('home-----isOpreate------watch-----', newVal)if (!newVal) { // 长时间未操作this.popups()//关闭弹窗this.popupcont=false//关闭方法    使首页恢复到最开始的状态}}},

4.store 里的存储方法

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {//这里放全局参数isOperate: true, // true：用户在操作 false：用户长时间未操作timeoutNum: 60,//倒计时60秒返回首页清除用户信息},getters:{//这里是get方法isOperate: state => state.isOperate,timeoutNum: state => state.timeoutNum},mutations: {//这里是set方法SET_ISOPERATE: (state, isOperate) => {state.isOperate = isOperate},SET_TIMEOUTNUM: (state, timeoutNum) => {state.timeoutNum = timeoutNum}},actions: {setIsOperate:({commit}, isOperate) => {commit('SET_ISOPERATE', isOperate)},setTimeoutNum:({commit}, timeoutNum) => {commit('SET_TIMEOUTNUM', timeoutNum)},}
})