- 前言,很多时侯,当我们构建一个前后端分离的h5项目
- 用户的登录状态基于服务端下发的token(令牌),token(令牌)存储在浏览器端的cookie中
- 而token(令牌)是否有效由服务端维护,当token(令牌)的有效时间可能很长的情况下
- 这时,我们遇到一个需求,就是当浏览器端在用户打开页面没有操作超过一段时间(例如20分钟)
- 用户登录状态自动失效,藉此,我们用api请求时间间隔模拟出一种登录过期的状态
- 例如api请求已经距上次超过一段时间(20分钟),本地token强制删除
- 用户登录状态失效,用户自动需要重新请求登录
var cookie ={
get:function(c_name){
if(document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1){
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
},
set:function(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
}
var api ={
getJSON:function(url,data,cb){
debugger;
var ok = this.sessionOver();
if(!ok){
//清除登录信息,token过期
cookie.set("token",'');
}
$.getJSON(url,data,function(data){
debugger;
cb(data);
})
},
sessionOver:function(){
var timestamp = Date.parse(new Date());
var t = cookie.get("t");
if(t==''){
cookie.set("t",timestamp,30);
return true;
}else{
var timespan= (timestamp-t)/1000;
cookie.set("t",timestamp,30);
if(timespan>1200){
return false;
}
return true;
}
}
}
var url = 'http://cookhome.local/api/zp/jobs';
api.getJSON(url,{},function(data){
console.log(data);
});