一、功能需求
session超时之前弹出模态框,选择继续、重新登录,继续时如果session失效,则重新进入当前页面,选择重新登录则跳转登录页面。
二、分析实现
其实大家都知道,netcore的session会话超时是在Startup中设置的代码如下:
services.AddSession(options =>
{
options.IdleTimeout = TimeSpan.FromMinutes(30);
options.Cookie.HttpOnly = false;
});
这种大家都知道的方法 ,前端访问后端时,还需要写过滤器,才会有效果,显然不能实现我们的需求,并且后端不能控制前端弹窗,准确的返回停留的页面。
好了,现在言归正传,想了很多也查了很多方法,但是都不适合咱们的需求,最后 我想到监听鼠标点击事件来完成这个需求。
三、代码及逻辑实现
jquery监听鼠标点击事件及setTimeout计时
// 获取后端json配置文件中的超时时间,转换setTimeout时间
var Time = (parseInt(timeout) * 60000) - 60000;
function a() {
$("#Session_modal").modal('toggle');
}
var t = setTimeout(a, Time);
$("body").mousedown(function (e) {
if (e.which == 3) {
//alert("鼠标点击了右键");
//清空setTimeout方法
clearTimeout(t)
//重新计时
t = setTimeout(a, Time);
} else if (e.which == 2) {
//alert("鼠标点击了中键");
clearTimeout(t)
t = setTimeout(a, Time);
} else if (e.which == 1) {
//alert("鼠标点击了左键");
clearTimeout(t)
t = setTimeout(a, Time);
}
});
大概的逻辑就是这样 代码非常的简单,无bug,主要就是jquery监听鼠标点击事件,当用户进入系统时,setTimeout开始按照后台配置文件计时,当鼠标点击时,清空当然计时,开启重新计时,一直遵守这个循环。
超时之后出现弹出框,用户自行选择,继续则刷新当然页面。
用户点击继续时,还需要记录当然页面,在jquery初始化时,会调用一个接口,获取当然页面url,并记录到localStorage中:
var currenturl = window.location.href;
localStorage.setItem("currenturl", currenturl);
接口返回登录之后session中的登录信息,前端存到localStorage中;
如果session消失,用户点击继续,再进入当然页面时,取出localStorage中的url,但是跳转时登录信息已经没有了,需要后台重新登录,取出localStorage中的用户信息,访问接口隐式登录之后再访问之前记录的链接!
以上是逻辑思路,除了主要的代码实现,剩下的一些代码就不一一展示了,毕竟每个项目的代码结构是不一样,大家有什么问题可以留言。