js 检查登录态方法封装(闭包、状态缓存)

前端页面开发时,经常需要异步校验登录态,每次都重新copy之前写的方法,比较繁琐不好维护,固将登录态校验封装成一个js。

(function(){
    //登录状态 1 登录态有效 2 登录态无效 3 请求超时
    var status;
    //状态到期时间戳
    var status_exprie_timestamp;
    //默认超时时间(秒数)
    var default_exprie_time = 60;
    //限定协议名只能为https 或 http
    var lp = "https:" == document.location.protocol ? ‘https:‘ : ‘http:‘;

    //检测是否登录
    //login_user_id 用户id | session_id 会话id | callback 成功失败超时后的回调函数
    //超时时间5秒
    function check_login(login_user_id,session_id,callback){
        //有状态 且 未过期 且 状态不为3(请求超时) 直接调用callback不更新过期时间戳
        if(status && !status_is_expire() && status != 3){
            callback(status);
            return ;
        }

        //格式判断
        if(!check_login_user_id(login_user_id) || !check_session_id(session_id)){
            exec(2,callback);
            return ;
        }

        //构建请求相关的变量
        var ajax_url = lp+‘//host/xxx‘;
        var data = {
            ‘login_user_id‘:login_user_id,
            ‘session_id‘:session_id,
            ‘onlyjson‘:0,
            ‘t‘:new Date().getTime()
        };

        //请求
        $.ajax({
            type : "get",
            url : ajax_url,
            data : data,
            timeout : 5000,
            dataType : "jsonp",
            success : function(data){
                if(data.rtn==0){
                    exec(1,callback);
                }else{
                    exec(2,callback);
                }
            },
            error:function(data, error_type, xhr){
                if(error_type==‘timeout‘){
                    exec(3,callback);
                }else{
                    exec(2,callback);
                }
            }
        });
    }

    // 同check_login 但不需要传login_user_id 和 session_id
    function esay_check_login(callback){
        var login_user_id = get_login_user_id();
        var session_id = get_session_id();
        check_login(login_user_id,session_id,callback);
    }

    //判断用户id格式
    function check_login_user_id(login_user_id){
        return /^[0-9]{4,}$/.test(login_user_id);
    }

    //判断会话id格式
    function check_session_id(session_id){
        return /^[0-9a-fA-F]{20,40}$/.test(session_id);
    }

    //获取用户id
    function get_login_user_id(){
        return _get(‘login_user_id‘) ? _get(‘login_user_id‘) : getCookie(‘login_user_id‘);
    }

    //获取会话id
    function get_session_id(){
        return _get(‘session_id‘) ? _get(‘session_id‘) : getCookie(‘session_id‘);
    }

    //获取当前的时间戳(秒)
    //add_sec 可选 为当前时间戳(秒)加上相应的秒数
    function get_now_timestamp(add_sec){
        var timestamp = Date.parse(new Date())/1000;
        if(add_sec && !isNaN(add_sec)){
            timestamp +=  parseInt(add_sec);
        }
        return timestamp;
    }

    //判断状态是否超时
    function status_is_expire(){
        var now_timestamp = get_now_timestamp();
        return status_exprie_timestamp && now_timestamp>=status_exprie_timestamp ? true : false;
    }

    //获取query参数方法
    function _get(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }

    //设置状态、超时时间 且 调用回调函数
    function exec(_status,callback){
        status = _status;
        status_exprie_timestamp = get_now_timestamp(default_exprie_time);
        callback(status);
    }

    //获取指定名称的cookie
    function getCookie(name){
        var arr=document.cookie.split(‘; ‘);
        if(!arr)return false;
        for(var i=0;i<arr.length;i++){
            var one=arr[i].split(‘=‘);
            if(one[0]==name)return one[1];
        }
        return false;
    }

    //抛出变量、方法
    window.check_login = check_login;
    window.esay_check_login = esay_check_login;
    window.LOGIN_SUCC = 1;
    window.LOGIN_FAIL = 2;
    window.LOGIN_TIMEOUT = 3;
})();

调用方法

check_login(login_user_id,session_id,function(status){

if(status == LOGIN_SUCC){
//xxx
}else if(status == LOGIN_FAIL){
//xxx
}else if(status == LOGIN_TIMEOUT){
//xxx
}

});
时间: 2024-07-31 13:36:14

js 检查登录态方法封装(闭包、状态缓存)的相关文章

animate动画方法封装:原生JS实现

1 /** 2 * Created by guoyongfeng on 2014/7/7. 3 * @Author guoyongfeng 4 * @Date 2014-07-07 5 * @Version 1.0.0 6 * @update 2014-07-07 7 * @described tween动画库函数封装 8 * 9 */ 10 define('animate/0.0.1', function(){ 11 /** 12 * 13 */ 14 return function(ele,

JS按回车键实现登录的方法

本文实例讲述了JS按回车键实现登录的方法,该功能有着非常广泛的实用价值.分享给大家供大家参考之用.具体方法如下: 方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Check Score</title> <script language="JavaScript">

js代码分离方法封装

var oldtd1; var oldtd2; var oldtd3; var indexnum = 0; //document.getebyid简写方法 function domByid(domid) { return document.getElementById(domid); } function domsByclass(domclass) { return document.getElementsByClassName(domclass); } //添加菜单方法 function Ad

常用js方法封装

常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: function(dt) { var str = ""; //存储时间的字符串 //获取年 var year = dt.getFullYear(); //获取月 var month = dt.getMonth() + 1; //获取日 var day = dt.getDate(); //获取小时

step by step教你常用JS方法封装(一) [ 大杂烩 ]

本文参考原文-http://bjbsair.com/2020-03-25/tech-info/6338/ 持续更新中... 常用JS方法封装方法预告: 项目常用JS方法封装(二) [ 时间处理 ] 项目常用JS方法封装(三) [ 字符串相关处理 ] 项目常用JS方法封装(四) [ 数组相关处理 ] 使用方法非常简单,只需放到你的 utils.js 工具文件中,直接 export const 加上我的封装方法,在别的文件中使用{方法1,方法2,方法3...}引用后就可以直接使用了! 001.输入一

带你玩转web开发之四 -如何用JS做登录注册页面校验

今日内容 使用JQuery完成页面定时弹出广告 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果 使用JQuery完成省市联动效果 使用JQuery完成下列列表左右选择 使用JQuery完成表单的校验. 今日目标: 掌握JQuery的基本使用 掌握JQuery的基本选择器,层次选择器 会使用JQuery完成DOM的基本操作 定时弹出广告 定时器: setInterval setTimeout clearInterval style.display : none 隐藏 bl

通用ajax请求方法封装,兼容主流浏览器

ajax简介 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面.如果没有AJAX,在youku看视频的过程中如果点击了"顶.踩".评论.评论翻页,页面就会刷新,视频就会被打断.开发一个看效果:用<video src="diaosi.mp4" autoplay controls></video>播放视频(只有支持html5的浏览器能播放),然后放一个"赞"按钮的功能(赞的数量存到数据库),看

Js跨域解决方法总结

本文转载自网易博客 出于安全性的考虑,在AJAX应用中,浏览器通常都会限制跨域提交数据.但由于经常和其他部门有接口对接的业务需求,需要跨域获取数据. IE对于跨域访问的处理是,弹出警告框,提醒用户.如果用户将该网站纳入可信任网站,或者调低安全级别,那么这个问题IE就不会在提醒你.    FireFox等其它非微软的浏览器遇到跨域访问,则解决方案统一是拒绝访问. Huodong.qq.com 下的网站前端要获取act.qzone.qq.com下的接口数据 有3种解决方法 1.服务器端做代理 服务器

js调用.net后台事件,和后台调用前台等方法以及js调用服务器控件的方法

http://blog.csdn.net/deepwishly/article/details/6670942  ajaxPro.dll基础教程(前台调用后台方法,后台调用前台方法) 1. javaScript函数中执行C#代码中的函数: 方法一:间接触发后台代码 1.首先建立一个服务端控件按钮命名为btn1,双击进入后台将调用或处理的内容写入btn1_click中; 2.在前台写一个js函数,内容为document.getElementByIdx("btn1").click(); 3