一、背景
用户登录系统后,在指定时间(15分钟)内没有任何操作时,为了安全和性能应该注销session并跳回到登录页面。该功能实现时前端使用的是JQuery EasyUI,后台使用的是SSM框架。
二、分析
- 如何刻画用户没有任何操作?
在Web系统中一般是先用鼠标去点击操作,很少有使用键盘快捷键的,所以可以使用JQuery的mouseover()绑定整个document用户有没有进行操作。JQuery中的$(document)意思是说,获取整个网页文档对象(类似的于window.document)。 - 不能使用ajax去访问action
判断超时后,需要去执行logout.action使其跳回到系统登录页面,注意这里因为有视图页面的跳转,所以无法使用Ajax(Ajax保持视图不变,只是去后台获取数据进行更新!)
使用window.location.href 属性去访问对应的action!
三、具体实现
前端代码:主要是超时时间的获取和action的访问
<script type="text/javascript">
var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 15 * 60 * 1000; //设置超时时间: 15分
function verifyTimeOut() {
currentTime = new Date().getTime(); //更新当前时间
if (currentTime - lastTime > timeOut) { //判断是否超时
window.location.href = "${pageContext.request.contextPath}/common/logout.action"
}
}
$(function () {
$(document).mouseover(function () {
lastTime = new Date().getTime(); //更新操作时间
});
/* 定时器 间隔1秒检测是否长时间未操作页面 */
window.setInterval(verifyTimeOut, 1000);
}
</script>
后台代码:主要用于清空session,并重定向到系统登录页面
@SystemLog(module = "系统管理", method = "用户退出")
@RequestMapping("logout.action")
public String logout(HttpServletRequest request, HttpServletResponse response) {
HttpSession session = request.getSession();
session.removeAttribute("userId");
session.removeAttribute("userAccount");
// 清空session
session.invalidate();
response.setDateHeader("Expires", 0);
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
//跳到根目录,即登录页面!
return "redirect:/" ;
}