Vue - 实现用户长时间不操作，自动退出登录

最新推荐文章于 2024-09-10 11:31:41 发布

风轻轻~

最新推荐文章于 2024-09-10 11:31:41 发布

阅读量1.9k

点赞数

分类专栏： # Vue__项目配置文章标签： vue.js

本文链接：https://blog.csdn.net/Jie_1997/article/details/121699018

版权

Vue__项目配置专栏收录该内容

14 篇文章

订阅专栏

该博客介绍了如何在前端实现自动登录与超时退出功能。通过监听用户操作并使用sessionStorage记录最后操作时间，当超过设定的10秒钟无操作时，系统将自动跳转至登录页面并清空sessionStorage。此功能在用户长时间不活动时增强了系统安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 util 文件夹下创建一个 auto_loginout.js 文件

import router from '@/router'
export default function () {
    let setInterval = null;//定时器
    let timeOut = 10 * 1000 // 设置超时时间: 10秒钟
    // console.log("开始", new Date().getTime())
    // 初次向sessionStorage存入操作时间
    window.sessionStorage.setItem('lastTime', new Date().getTime())
    // 每次操作页面，更新sessionStorage存入的操作时间
    window.onload = function () {
        window.document.onmousedown = function () {
            // console.log("开始", new Date().getTime())
            window.sessionStorage.setItem('lastTime', new Date().getTime())
        }
    }
    function checkTimeout() {
        let currentTime = new Date().getTime() // 当前时间
        let lastTime = window.sessionStorage.getItem("lastTime")//上次操作的时间
        // 判断是否超时
        if (currentTime - lastTime >= timeOut) {
            // console.log("结束", new Date().getTime())
            // 清除定时器
            window.clearInterval(setInterval);
            // 清除sessionStorage
            window.sessionStorage.clear('lastTime')
            // 跳到登陆页
            if (router.history.current.fullPath !== '/' && router.history.current.fullPath !== '/login') {
                router.push("/login")
                window.location.reload()
            }
        }
    }
    /* 定时器 间隔2秒检测是否长时间未操作页面 */
    setInterval = window.setInterval(checkTimeout, 2000)
}

在 main.js 中引用，通过全局方法 Vue.use() 使用

// 自动退出文件路径
import auto_loginout from '@/util/auto_loginout.js'
Vue.use(auto_loginout)