layui框架中如何实现,在登录超时实现自动跳转登录页?

前言:
        最近,接手了一个layui框架做的系统,现在需要实现接口登录超时,自动跳转到登录页的操作。
         方案:后台判断是否超时,前端根据接口返回的code码,实现自动跳转至登录页面。
         问题点:前端重定向经常使用的是----window.location,href,如果你恰好使用了这个的话,恭喜你,已经踩了一个小坑,因为用了之后你会发现他是在子窗口跳转到登录页,而不是整个系统跳转,如下图。(原因:大概和layui整体页面的布局有关系吧,页面右下部分的内容是镶嵌在iframe标签里面的,所以,跳转是在子窗口跳转,没有跳转至父级窗口)。
在这里插入图片描述

        然后,在网上找到了很多解决方法,在此汇总一下。
一、解决方法
        ①使用top.location.href:

top.location.href = '/physical/login/login';

        ②使用window.parent.frames.location.href:

<script language="javascript">
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.msg('长时间未操作,系统自动判定为已下线!', {icon: 0,time: 3000}, function(){window.parent.frames.location.href="/Menber/login"});
        });
</script>

        ③使用 window.parent.location.replace(“toLogin.do”):


// 在公用文件common.js中,声明一下代码:
 
var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 15 * 60 * 1000; //设置超时时间: 15分
 
$(function(){
    /* 鼠标移动事件 */
    $(document).mouseover(function(){
        lastTime = new Date().getTime(); //更新操作时间
 
    });
});
 
function toLoginPage(){
    currentTime = new Date().getTime(); //更新当前时间
    if(currentTime - lastTime > timeOut){ //判断是否超时
    	window.close();//关闭当前页
        window.parent.location.replace("toLogin.do");//刷新父级页面;
    }
}
 
/* 定时器  
 * 间隔1秒检测是否长时间未操作页面  
 */
window.setInterval(toLoginPage, 1000);

参考博客:
①layui框架如何在停止服务用户操作任何步骤自动跳转登录页 https://www.cnblogs.com/shenwh/p/13692270.html
②登录超时(js_layui) https://www.cnblogs.com/xrxiaolong/articles/14469639.html
③前端 session过期后防止登录页面显示在layui的弹出框里 https://blog.csdn.net/benpaodelulu_guajian/article/details/87736290
④web页面长时间未操作后,自动退出到登录页面 https://blog.csdn.net/ysh598923879/article/details/88846774

  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 JavaScript实现一定时间无操作自动跳转登录面。具体的实现思路如下: 1. 定义一个计时器变量,用于记录用户最后一次操作的时间。 2. 在面加载时,给整个面绑定一个鼠标移动事件和键盘事件,当用户进行操作时,将计时器重置为当前时间。 3. 定义一个函数,用于检查当前时间与计时器记录的时间差是否超过指定的时间间隔,如果超过了,则跳转登录面。 4. 在面加载时启动定时器,定时检查时间间隔是否超过指定值,如果超过了则跳转登录面。 以下是一个简单的实现示例代码: ```javascript // 定义一个计时器变量,初始为当前时间 var lastActiveTime = new Date().getTime(); // 绑定鼠标移动事件和键盘事件,重置计时器 document.addEventListener('mousemove', function() { lastActiveTime = new Date().getTime(); }); document.addEventListener('keypress',function(){ lastActiveTime = new Date().getTime(); }); // 定义跳转函数,用于检查时间间隔并跳转登录面 function checkTimeout() { var now = new Date().getTime(); var timeout = 60000; // 设定超时时间为60秒 if (now - lastActiveTime > timeout) { window.location.href = 'login.html'; // 跳转登录面 } } // 启动定时器,每10秒检查一次时间间隔 setInterval(checkTimeout, 10000); ``` 上述代码会在用户最后一次操作后的60秒内不断检查时间间隔,并在超时跳转登录面。你可以根据需要修改超时时间和定时器的时间间隔。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值