最近项目用到登录需求：
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>
个人观点，仅供参考！