【前端】web 页面长时间未操作自动退出方法(自动退出登录)

web 页面自动超时自动退出方法

思路:
使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出;
具体时间代码如下(js):

        var lastTime = new Date().getTime();
        var currentTime = new Date().getTime();
        var timeOut = 10 * 60 * 1000; //设置超时时间: 10分

        $(function(){
            /* 鼠标移动事件 */
            $(document).mouseover(function(){
                lastTime = new Date().getTime(); //更新操作时间
            });

            //键盘点击
            $(document).keydown(function (event) {
                lastTime = new Date().getTime(); //更新操作时间
            });
        });

        function testTime(){
            currentTime = new Date().getTime(); //更新当前时间
            if(currentTime - lastTime > timeOut){ //判断是否超时
                console.log("超时");
            }
        }

        /* 定时器  间隔1秒检测是否长时间未操作页面  */
        window.setInterval(testTime, 1000);

为了实现在前端项目中既保持用户会话的持久性又能在token过期时合理处理,通常采用的是结合会话管理和心跳检测的技术。下面是一个简单的JavaScript代码示例,假设我们正在使用Node.js和Express框架: 1. **存储用户的session信息**: 使用`express-session`库来管理用户会话,设置cookie过期时间相对较长: ```javascript const session = require('express-session'); app.use(session({ secret: 'your-secret-key', resave: false, saveUninitialized: true, cookie: { maxAge: 86400000 } // 一天的秒数,这里假设为一天 })); ``` 2. **登录验证中间件**: 检查用户是否存在有效的session: ```javascript function checkAuth(req, res, next) { const user = req.session.user; if (!user || !isValidToken(user.token)) { // 判断token是否有效 return res.status(401).json({ message: 'Unauthorized' }); } next(); } ``` 3. **心跳检测(optional)**: 使用`socket.io`或其他长连接技术,定时发送心跳包以检查连接状态。当服务器收到心跳响应时,可以认为session已过期。 ```javascript const io = require('socket.io')(server); io.on('connection', (socket) => { socket.on('heartBeat', () => { // 发送心跳请求到服务器,如无响应则关闭连接 }); // 设置心跳检测间隔(比如每5分钟) setInterval(() => { sendHeartbeatToServer(socket); }, 5 * 60 * 1000); }); ``` 4. **处理token过期**: 当用户长时间操作(比如超过设定的session超时时间),在接收不到心跳信号时,服务器端可以清除相应的session。 注意这只是一个简化的示例,实际应用中还需要考虑安全性、数据库同步等问题,并使用HTTPS来保护敏感数据传输。同时,生产环境可能需要更复杂的身份验证和刷新机制,例如JWT(JSON Web Tokens)。另外,关于用户长期操作导致的自动退出,可以根据业务需求选择合适的策略,比如设置一个较低频率的心跳检测阈值,避免频繁干扰用户。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜太小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值