判断用户是否正常登录与登录10分钟内无操作返回登录界面
最近项目用到登录需求:
1.用户正常登录,即从登录界面进入,如果从url进入提示:未登录,请登录。然后返回登录界面。
2.用户登录后,10分钟无操作,提示登录超时,请重新登录;
现在做个简单演示,代码如下:
login.html页面中:html部分
<body>
<div class="header">
<p>SUMS软件升级管理系统</p>
</div>
<div class="footer">
<div id="loginform" class="loginBox">
<form class="form" autocomplete="off">
<input name="username" type="text" placeholder="请输入用户名" class="username fl" id="username">
<input name="password" type="password" placeholder="请输入密码" class="password fl" id="password">
<div class="Hui-iconfont prompt-3" id="prompt-3"></div>
<div class="row clearfix forminput">
<input name="user" type="button" value="" class="user fl" id="user" > //登录按钮
<input name="power" type="button" value="" class="power fl" id="powerenter"> //登录按钮
</div>
</form>
</div>
</div>
</body>
login.html页面中:script部分
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
// 登录接口 这是登录界面login.html的js代码
$("#user").click(function () {
if(username.val().length == 0 || password.val().length == 0){ //简单判断用户名和密码不为空
return false;
}else{
var name = username.val();
var userurl = "index.html?usrname="+ name; //登录到url连接并带值
$.ajax({
type: "POST", //post方式
url: "/api/login",//登录接口
data: {
username: username.val(),
password: password.val()
},
dataType: "json",
success: function (result) {
if (result.code == 0) { //后台返回状态码,code=0的时候登录成功
var customerId = result.data.id; //将数据中用户信息的ID赋值给变量
sessionStorage.customerId = customerId; //将变量存储到本地sessionStorage中,并且value为customerID
window.location.href = userurl ; //跳转连接 index.html页面
} else {
$("#prompt-3").css("display","block").html(""+result.msg);//没登录时提示信息,后台做的判断
}
},
error : function() {
alert("error!!");
}
})
}
});
})
</script>
index.html页面根据customerId做功能判断,判断是否是正常登录;
index.html页面的script部分:
<script>
$(function () {
// 判断是否登录 未登录返回登录界面
var customerId= sessionStorage.customerId;//接收customerId的值
console.log(customerId);
if (customerId == undefined) { //判断是否有值
alert("没有登录,请登录");
window.location.href = "login.html";
}
//判断长时间未操作就退出登录
var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 10 * 60 * 1000; //设置超时时间: 10分钟
$(function(){
/* 监听鼠标移动事件 */
$(document).mouseover(function(){
lastTime = new Date().getTime(); //更新操作时间
});
});
function testTime(){
currentTime = new Date().getTime(); //更新当前时间
if(currentTime - lastTime > timeOut){ //判断是否超时
alert("登录超时,请重新登录");
window.location.href = "login.html";
}
}
/* 定时器 间隔5秒检测是否长时间未操作页面 */
window.setInterval(testTime, 5000);
// 通过url将用户名称带过来,用此方法汉字会乱码
var indexurl = window.location.href.split("?")[1];
var temp = indexurl.split("&");
var tempname = temp[0].split("=")[1];
$(".currentname").text(tempname);
})
</script>
个人观点,仅供参考!