前端判断用户活跃情况,长时间不活跃自动退出登录

微信小程序登录授权全解析:静默登录、用户信息授权与服务端校验 在移动应用开发中,用户身份认证是构建安全、个性化服务的基础。其核心原理通常基于OAuth 2.0等授权框架,通过令牌机制在客户端与服务器之间安全地传递身份信息。这一技术的核心价值在于,它能在保护用户隐私的前提下,实现无缝的用户识别与状态管理,是提升用户体验和保障数据安全的关键。在微信小程序生态中,这一技术理念被具体化为三种主流的登录授权实现方式,以满足不同业务场景的需求。其中,**静默登录**是实现无感身份识别的基石,而**用户信息授权**则是在用户明确同意后获取头像、昵称等公开信息的关键交互。理解这些方式 阅读详情

需求:判断用户活跃情况,超过30分钟不活跃直接退出登录。

本想一开始记录下最后一次请求的时间,用最后一次请求的时间去判断用户的活跃程度。这样也有点局限。

网上搜了一下,说用鼠标移动状态来检测是否在操作页面。不能说完全不好,但也算是一种方法。于是…

// 检测用户活跃情况
function isActive() {
    var arr = ['index', 'login']
    var result = arr.some(function(item) {
        return window.location.href.indexOf(item) > 0
    })
    // result 表示当前页面可能是index或者注册页面 
    // 不是index页面 ,不是注册页面才会去检测用户的活跃状态(鼠标移动状态)
    if (!result) {
        var lastTime = new Date().getTime();
        var currentTime = new Date().getTime();
        //设置超时时间: 10分
        var timeOut = 10 * 60 * 1000; 

        window.onload = function() {
            /* 检测鼠标移动事件 */
            document.addEventListener('mousemove', function() {
                // 更新最后的操作时间
                console.log('鼠标移动了')
                lastTime = new Date().getTime();
            })
        }

        /* 定时器  间隔1分钟,检测是否长时间未操作页面  */
        var quitTime = window.setInterval(testTime, 60000);

        // 超时函数
        function testTime() {
            //更新当前时间
            currentTime = new Date().getTime();
            console.log('currentTime', currentTime)
            //判断是否超时
            if (currentTime - lastTime > timeOut) {
                // console.log('超时拉')
                // 超时操作
                axios.post(logoutUrl,params)
                .then(function (res) {
                  // 写超时执行的代码,例如退出登录什么的
                })
                .catch(function (error) {
                  console.log(error);
                });
                // 清除掉定时器
                window.clearInterval(quitTime)
            }
        }
    }
}

isActive()
Web安全实践:基于Token的Cookie自动登录机制设计与实现 在Web开发中,身份认证是保障系统安全的核心环节。其基本原理是通过服务器验证用户凭证后,建立并维持可信的会话状态。为实现跨会话的持久登录体验,开发者常采用Cookie存储认证令牌的技术方案。这一方案的技术价值在于,它能在不存储敏感密码的前提下,安全地实现“记住我”功能,有效平衡用户体验与系统安全。典型的应用场景包括电商平台、社交应用和企业后台系统等需要长期登录状态的Web服务。本文聚焦于Cookie与Token的协同机制,通过设计不可预测的高强度令牌、实施哈希存储与设备指纹绑定等防御策略,构建了一套可抵御重 阅读详情

相关推荐

FIFO Generate IP核使用——FIFO写操作详解及Status Flags页配置

本文介绍了FIFO的写操作及Status Flags页的配置信息。

u011565038的博客 2284

多应用单点登录,js判断用户是否在别的应用登录成功

//client js查看用户是否登录 function getLoginstatu(){ var _services = 'service=' + encodeURIComponent("http://ip:port/**.html"); $.getScript('http://192.168.1.120:8080/cas-server/login?'+_services+'&...

松篁 376

python电子学会三级的零碎笔记

‌示例‌:如果s = ['a', 'b', 'c'],则' '.join(s)+'\n'的结果是'a b c\n',写入文件时所有元素会在一行内显示,每个元素之间用空格分隔,末尾有一个换行符。(2) '\n'.join(s)‌:如果s = ['a', 'b', 'c'],则'\n'.join(s)的结果是'a\nb\nc',写入文件时每个元素会占据文件的一行。(1) ' '.join(s)+'\n'‌:这种方式首先将列表s中的每个元素通过空格连接成一个字符串,然后在字符串末尾添加一个换行符\n。

xzal12的博客 690

vue中js判断长时间不操作界面自动退出登录

vue中js判断长时间不操作界面自动退出登录

qq_41644707的博客 641

【Anaconda】解决“libGL error: MESA-LOADER: failed to open iris”问题

stackoverflow中的“libGL error: MESA-LOADER: failed to open iris”问题。而在自己创建的conda环境中的lib下出现`GLIBCXX_3.4.30’ not found 的情况。在上述解决方案中,将第一行命令的lib路径换成自己创建的conda环境lib路径,运行指令,问题解决。目前问题解决,总结一下查找资料以及解决方法。运行如下命令,发现本地支持。

quintus0505的博客 5024

微信聊天记录解密,必须是root的手机

手机上安装x-plore软件,将/data/data目录的相关EnMicroMsg.db auth_info_key_prefs.xml拷贝到/storge/emulated/0目录后才可以拷贝到电脑。路径:/data/data/com.tencent.mm/shared_prefs/auth_info_key_prefs.xml。但是是加密过的 需要解密 解密密码生成规则是手机IMEI+微信UIN md5(32位小写)后的前7位。安卓手机要root测试版本微信要7或者8版本都可以。选择message表。

venus60的专栏 1006

检测用户是否处于空闲状态或处于非活动状态

某些应用程序需要你持续关注。这类应用程序通常包括游戏、媒体播放器、任何 CPU/电池密集型的应用程序等等。对于这些类型的应用程序,当用户不再主动与您的应用程序交互时,做一些事情(以及用户友好的)可能很重要。 创建 init 函数。其中监听各种鼠标、键盘和触摸事件,来确保应用程序的活动状态。如果监听到这些事件中的任何一个,使用resetTimer 函数充当事件处理程序并被调用。 使用 setTim...

lio-zero 的博客 894

PyCharm中Matplotlib中文显示问题的终极解决方案

本文详细解析了PyCharm中Matplotlib中文显示问题的根本原因,并提供了从简单三行代码到深入配置的多套解决方案。针对Windows、Mac和Linux不同系统环境,分别推荐了最优字体配置方案,同时涵盖了PyCharm特定环境下的后端设置、字体路径指定等高级技巧,帮助开发者彻底解决中文乱码问题。

weixin_28221501的博客 303

php web长时间不操作退出,vue中js判断长时间不操作界面自动退出登录(推荐)

需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面。创建一个.js文件,在main.js引入此js(vue框架)在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime());然后在点击的时候更新这个时间var lastTime = n...

weixin_42113380的博客 207

51单片机学习(5)-----蜂鸣器的介绍与使用

蜂鸣器是一种一体化结构的电子讯响器,采用直流电压供电,广泛应用于计 算机、 打印机、 复印机、 报警器、 电子玩具、 汽车电子设备、 电话机、 定 时器等电子产品中作发声器件。蜂鸣器主要分为压电式蜂鸣器和电磁式蜂鸣器两种类型。1.半导体三极管也称为晶体三极管,可以说它是电子电路中最重要的器件。三极管顾名思义具有三个电极。二极管是由一个PN结构成的,而三极管由两个PN结构成,共用的一个电极成为三极管的基极(用字母b表示)。其他的两个电极成为集电极(用字母c表示)和发射极(用字母e表示)。

2302_80260350的博客 1万+

matlab实现MSK调制解调

文章目录一、要求二、设计三、代码四、结果五、结论 一、要求 画出MSK信号产生的信息、I路、Q路信号对比图以及接收端解调的信息恢复的对比图。 二、设计 1.MSK调制 2.MSK解调 三、代码 clear all;clc; N=20; T=1; fc=10; Fs=100; bitstream=randi([0,1],1,N); bitstream1=2*bitstream-1; b0=1; for i=1:N encode_output(i)=b0*bitstream

Time_book的博客 1万+

使用 JavaScript 检测用户是否在线

有时您可能希望增强您的应用程序以通知用户他们可能已经失去了互联网连接。用户可能正在访问您的网站并收到缓存版本,因此通常看起来他们的互联网仍在工作。 然而,他们失去了引擎盖下的连接,并且不会加载任何新内容。在这里向他们显示一些消息以让他们知道他们应该检查他们的连接可能是有益的。我们可以利用API 来检测连接状态。 这将返回一个布尔值来指示用户是否在线。这在初始加载时效果很好,所以我们可以做这样的事情。 但是我们不知道加载后网络状态是否发生变化,这是不理想的。我们可以订阅离线和在线事件来监听这些特

u010291330的博客 814

RepHead一种重参数化检测头用于提升YOLOv8在困难样本上的检测性能

在目标检测任务中,困难样本通常是指那些由于特殊背景、遮挡、低分辨率或极度小物体等因素,导致模型难以识别的样本。这类样本对传统YOLO系列模型的影响较大,常常造成漏检或误检。重参数化(Reparameterization)是一种深度学习中常用的技术,旨在通过对网络参数的变换,使得模型在训练过程中能够更加灵活地适应不同的数据特征。通过对原始网络结构的参数进行重新表达,能够引导模型在训练过程中学习到更加有效的特征。本文详细介绍了YOLOv8的改进——RepHead检测头,并深入分析了它在解决困难样本检测中的应用。

博客 1209

Vue 实现登陆后长时间未点击自动退出登录

具体的实现思路如下;当前时间 - 最后一次点击的时间 > 超时时间 当鼠标点击的时候,最后一次点击时间更新 前端不断的刷新当前时间并最后一次点击时间进行比较,若大于超时时间则判断用户是否在登录状态,若在登录状态退出登录,其中,登录状态由sessionStorage保存 关于App.vue:App.vue是Vue项目的主组件,所有的页面都是在App.vue下进行切换的,其切换的方法主要是通过r...

weixin_43431702的博客 1753

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

vue实现用户长时间不操作自动退出登录功能

vue实现用户长时间不操作自动退出登录功能

u012632105的博客 872

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

Java Web用户指定时间内未登录时断开连接并跳回到登录页面

一、背景 用户登录系统后,在指定时间(15分钟)内没有任何操作时,为了安全和性能应该注销session并跳回到登录页面。该功能实现时前端使用的是JQuery EasyUI,后台使用的是SSM框架。 二、分析 如何刻画用户没有任何操作? 在Web系统中一般是先用鼠标去点击操作,很少有使用键盘快捷键的,所以可以使用JQuery的mouseover()绑定整个document用户有没有进行操作。JQu...

Michael Hsu 1859

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

js实现页面长时间不操作返回登录页面

1. 记录进入页面时间; 2. 设置定时器,隔3秒记录一次当前时间; 3. 如果当前时间-第一次进入时间>过期时间,弹出layer提示框; 4. 点击确定,跳转登录页面。 上代码: var firstTime = new Date().getTime(); var currentTime = new Date().getTime(); var timeOut = 10 * 60 ...

MaxVelika的博客 2216

会话超时自动退出:防止长时间滞留风险

在私有化部署的AI知识管理系统中,会话超时自动登出是防止信息泄露的关键机制。通过前端行为监听与短期Token结合,实现用户离席后的快速响应与凭证清理,兼顾安全性与体验。该机制尤其适用于处理敏感数据的场景,成为纵深防御体系中的基础环节。

weixin_35266799的博客 423

Ajax实现页面无操作自动退出操作

当我们在浏览网站时,在一定时间在当前网站无任何操作,使用Ajax实现自动退出功能。 分析需求,用户无操作退出。如何友好的提示提示用户?如何做判定用户在一定时间没有任何操作?在js中我们可以通过鼠标按下移动事件,键盘事件等来进行判定。 var maxTime = 600; // seconds var time = maxTime; $('body').on('key

An丶的博客 2794

vue路由路径加上自动退出登录

vue路由路径加上自动退出登录,实现系统页面在一定时长内停留不操作后退出到登录页(即访问过时退出)。

weixin_44293690的博客 223

基于 Vue3 实现用户闲置自动退出登录方案

本文提出了一种基于Vue3 Composition API的闲置自动登出方案,通过封装useIdleLogout组合式函数实现高安全性、高复用性的用户闲置监控能力。方案采用分层设计将事件监听与业务逻辑解耦,支持跨标签页状态同步、页面刷新状态恢复、动态超时配置等核心功能。通过localStorage存储活跃时间戳实现多窗口同步,并针对内存泄漏、重复登出等场景设置防护机制。该方案已在实际后台管理系统中验证有效性,具有解耦复用、动态配置、安全可靠等特点,适用于各类需要严格权限管控的企业级Vue3应用。

分享一些破烂儿 334

用户停留网站无操作,一定时间后自动退出

1.一般页面 function checkUserFun(){ var maxTime = 2*60*60; // seconds (2小时) var time = maxTime; $('body').on('keydown mousemove mousedown click scroll', function(e){ time = max...

weixin_30530523的博客 720

前端react 实现监控鼠标移动超时未操作踢出登录页面 鼠标移动更新服务端Session状态

前言 现有系统超时踢出登录实现的是页面操作调取服务时获取,这样就有一个弊端,列如:在未调取服务时,系统填写完相关信息点击提交才知道登录超时踢出登录,用户实用性不佳。 现在想到一个方法就是前端获取用户鼠标是否移动,未移动一定时间后,前端实现踢出登录操作。 1.给页面最外层的div增加监听事件 let ICE_CONTAINER = document.getElementById('app'); //鼠标最后的操作时间 let lastTime = new Date().getTime(); //当前时间 le

前端小小乐的博客 2730

系统30s不操作自动退出:TaoToken 统一 Key 下的会话超时排查与配置

系统30s不操作自动退出多因前端计时、网关鉴权与Token刷新三层叠加。本文提供可复制的空闲计时、Nginx读超时与auth.json配置,结合curl复现定位触发层,并对照401、local proxy failed等报错排查。接入TaoToken统一Key可集中管理超时参数,官网见 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 。

weixin_28895791的博客 208

Vue空闲超时检测:1小时无操作自动退出登录实现方案

空闲超时检测是前端安全中常见的会话管理机制,其原理是通过监听用户交互事件并记录最后操作时间,结合定时轮询判断是否超时。在Vue项目中,利用localStorage持久化时间戳可实现多标签页同步,配合路由守卫和事件监听完成自动登出。该技术能有效防止会话长期挂起导致的安全风险,适用于后台管理系统、内部工具等场景。本文围绕Vue空闲超时检测与自动退出登录,详细拆解了事件监听、节流更新、定时检查及多标签页同步等核心实现,并给出完整代码与避坑指南。

weixin_29001419的博客 256

前端登录状态管理:Service Worker与BroadcastChannel实践

在现代Web开发中,状态管理是构建复杂应用的核心技术。通过浏览器存储API与事件通信机制,开发者可以实现跨标签页的数据同步。Service Worker作为独立于主线程的后台进程,配合BroadcastChannel的消息通信能力,能够有效解决传统localStorage方案在跨标签页状态同步中的缺陷。这种技术组合特别适合需要持久化登录态的企业级应用,能够显著提升多标签操作、移动端恢复等场景下的用户体验。实际工程中还需结合Page Visibility API进行精准控制,并建立完善的内存管理和异常监控体系

weixin_29534421的博客 3
上一篇: 使用gulp打包增加hash值,解决浏览器缓存问题
下一篇: 接口获取到的数据也需是多语言
cofecode
博客等级 码龄9年 43粉丝 102原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值