前言:
最近,接手了一个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