博客

前言：


最近，接手了一个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