1. 程式人生 > >Ajax-hook攔截所有的Ajax請求

Ajax-hook攔截所有的Ajax請求

在解決同一個瀏覽器登入多個賬戶,解決sesson覆蓋問題的時候,我想到的辦法是為每一個使用者的session定義唯一的key,例如“sessionUser”+accessToken.

accessToken是登入校驗成功後,生成的唯一字串,你可以使用UUID策略。這樣,我需要給所有的ajax請求帶上這個accessToken,有沒有簡單的辦法,有的,Ajax-hook可以做到。

Ajax-hook使用場景:需要給所有ajax請求新增統一簽名、需要統計某個介面被請求的次數、需要限制http請求的方法必須為get或post、需要分析別人網路協議等等。

/** 
 * intercept ajax request
 * */
!function (ob) {
    ob.hookAjax = function (funs) {
        window._ahrealxhr = window._ahrealxhr || XMLHttpRequest
        XMLHttpRequest = function () {
            this.xhr = new window._ahrealxhr;
            for (var attr in this.xhr) {
                var type = "";
                try {
                    type = typeof this.xhr[attr]
                } catch (e) {}
                if (type === "function") {
                    this[attr] = hookfun(attr);
                } else {
                    Object.defineProperty(this, attr, {
                        get: getFactory(attr),
                        set: setFactory(attr)
                    })
                }
            }
        }

        function getFactory(attr) {
            return function () {
                return this.hasOwnProperty(attr + "_")?this[attr + "_"]:this.xhr[attr];
            }
        }

        function setFactory(attr) {
            return function (f) {
                var xhr = this.xhr;
                var that = this;
                if (attr.indexOf("on") != 0) {
                    this[attr + "_"] = f;
                    return;
                }
                if (funs[attr]) {
                    xhr[attr] = function () {
                        funs[attr](that) || f.apply(xhr, arguments);
                    }
                } else {
                    xhr[attr] = f;
                }
            }
        }

        function hookfun(fun) {
            return function () {
                var args = [].slice.call(arguments)
                if (funs[fun] && funs[fun].call(this, args, this.xhr)) {
                    return;
                }
                return this.xhr[fun].apply(this.xhr, args);
            }
        }
        return window._ahrealxhr;
    }
    ob.unHookAjax = function () {
        if (window._ahrealxhr)  XMLHttpRequest = window._ahrealxhr;
        window._ahrealxhr = undefined;
    }
}(window);

使用方法:

hookAjax({
	onload:function(xhr) {
		
	},
	open:function(arg){
	    if (arg[1].indexOf('?') != -1) {
	        arg[1]+="&accessToken="+$("#accessToken").val();
	    }else {
	        arg[1]+="?accessToken="+$("#accessToken").val();
	    }
	}

});