页面30分钟未操作，情况token并退出登录

src/App.vue

@@ -5,7 +5,54 @@
 </template>
 
 <script>
+import { handleLogout } from '@/api/login'
+
 export default {
-  name: 'App'
+  name: 'App',
+  data() {
+    return {
+      timeout: null
+    }
+  },
+  mounted() {
+    this.setupAutoLogoutTimer() // 页面加载时启动监控用户操作
+  },
+  methods: {
+    /** 页面加载时启动监控用户操作*/
+    setupAutoLogoutTimer() {
+      // 监听用户操作事件
+      window.addEventListener('mousemove', this.resetTimer)
+      window.addEventListener('scroll', this.resetTimer)
+      window.addEventListener('keypress', this.resetTimer)
+      window.addEventListener('click', this.resetTimer)
+      // 启动定时器
+      this.startTimer()
+    },
+    // 重置定时器
+    resetTimer() {
+      console.log('重置定时器重置定时器重置定时器')
+      clearTimeout(this.timeout)
+      this.startTimer()
+    },
+    /** 启动定时器*/
+    startTimer() {
+      console.log('启动定时器启动定时器启动定时器', this.$route.path)
+      if (this.$route.path !== '/login') {
+        // 启动一个30分钟的定时器
+        this.timeout = setTimeout(() => {
+          // 超时处理逻辑，例如清空token并退出登录
+          console.log('退出退出')
+          handleLogout().then(res => {
+            if (res.code === 200) {
+              this.$message.success('退出成功！')
+              this.$store.dispatch('FedLogOut').then(() => {
+                location.reload()
+              })
+            }
+          })
+        }, 30 * 60 * 1000) // 30分钟
+      }
+    }
+  }
 }
 </script>