在浏览器端利用API请求时间间隔模拟SEESSION过期机制

 

• 前言,很多时侯,当我们构建一个前后端分离的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);
                });