一般前端是否退出到登录都是根据接口返回是否为401，即token失效。
但是现在有一个需求是用户三十分钟未操作页面就退出到登录，此时token并未失效，因为界面中有很多的轮询，在没有操作页面的情况下，接口仍在访问，导致token续期，所以此时通过判断是否401状态就不可行了。
那么，前端如何判断用户是否在三十分钟内均未操作界面呢？
这就需要用到mousemove和mousewheel事件了。
mousemove：鼠标移动事件
mousewheel:鼠标滚动事件
通过监听这两种事件即可判断用户是否有操作页面
App.vue

<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>
<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { useConfigStore } from '@/stores/config'
import { computed, onUnmounted } from 'vue'

const store = useConfigStore()
const locale = computed(() => {
  if (store.lang === 'en') return en
  else {
    return zhCn
  }
})
store.timeOutValue = 30 * 60 * 1000
const handleEvent = () => {
  // 判断是否超过30分钟未操作界面
  store.changeLastTime()
}
// 创建定时器，主动判断
const timer = setInterval(() => {
  store.isTimeOut()
}, 5000)

const body = document.querySelector('html')
// 鼠标移动
body?.addEventListener('mousemove', handleEvent)
// 鼠标滚动事件
body?.addEventListener('mousewheel', handleEvent)
onUnmounted(() => {
  body?.removeEventListener('mousemove', handleEvent)
  body?.removeEventListener('mousewheel', handleEvent)
  clearInterval(timer)
})
</script>

stores/config

import { colorHextoRGB } from '@/utils/util'
import { defineStore } from 'pinia'
import router from '@/router'
export const useConfigStore = defineStore('config', {
  state: () => {
    return {
      lastTime: 0, // 上一次点击的时间
      timeOutValue: 30 * 60 * 1000 // 设置超时时间:30分钟 30 * 60 * 1000
    }
  },
  getters: {},
  actions: {
    changeLastTime () {
      this.lastTime = new Date().getTime()
    },
    // 判断是否大于30分钟
    isTimeOut () {
      const currentTime = new Date().getTime() // 记录当前时间
      if (currentTime - this.lastTime > this.timeOutValue) { // 上次最后一次点击的时间和当前时间间隔大于30分钟（指定的时间）
        if (JSON.parse(localStorage.getItem('user') ?? '{}')?.userInfo?.token) { // 如果是登录状态
          ElMessage.error('长时间未操作页面，请重新登录')
          setTimeout(() => {
            router.push('/login')
          }, 3000)
        }
      }
    }
  },
  persist: true
})