Ajax - I need to check if a valid session exists before each AJAX request

Question

I am working on a project that uses user authentication. I ran into a problem with my AJAX requests if the request did not have an authenticated session.

I have a 3min session timeout, so if the user has been idle for 3 minutes, then do some action that triggers the AJAX request, then the request will fail and return error 403. Here, what I plan to do is intercept the entire AJAX request from the page and send the ping to the server, which will return a JSON object, indicating whether a valid session exists. If there is one, the client will continue the current request, otherwise it will reload the current page, which will lead the user to the login page, and the user must again provide credentials.

Here is my implementation.

$("#param-ajax").ajaxSend(function(evt, request, settings) { var pingurl = GtsJQuery.getContextPath() + '/ping.json'; var escapedurl = pingurl.replace(/\//g, "\\/"); var regexpr1 = eval('/^' + escapedurl + '\\?.*$/'); var regexpr2 = eval('/^' + escapedurl + '$/'); // Proceed with the ping only if the url is not the ping url else it will // cause recursive calls which will never end. if (!regexpr1.test(settings.url) && !regexpr2.test(settings.url)) { var timeout = false; $.ajax({ url : pingurl, cache : false, data : { url : settings.url }, async : false, complete : function(request, status) { if (status == "error") { try { // GtsJQuery.getJsonObject() converts the string // response to a JSON object var result = GtsJQuery .getJsonObject(request.responseText) if (result.timeout) { timeout = true; return; } } catch (e) { // ignore the error. This should never occure. } } } }); // Reload the window if there is a timeout -- means there is no valid // sesstion if (timeout) { window.location.reload(); } } }); 

Everything works fine here, including window.location.reload (), but the original ajax request is not interrupted. Because the original AJAX request is not interrupted after the page reload starts, the AJAX request is also sent to the server. I need some mechanism that will allow me to abort the original request if the timeout is correct.

This post offers some answer, but the problem remains with third-party plugins such as datatables, which uses AJAX. We cannot write an error handler for these AJAX requests.

Thanks.

Answer 1

Now I have changed my concept, I am checking server side xmlHTTPRequest using the request header 'x-request-with'.

If it is xmlHTTPRequest, then "x-request-with" will be set to "XMLHttpRequest". And the javascript libraries (EXTjs and jQuery) that I use correctly set this header.

Here is my server side code

 boolean isAjaxRequest = StringUtils.endsWithIgnoreCase(request.getHeader("x-requested-with"), "XMLHttpRequest") 

EDIT

If this request is an ajax request, the response will be json data, which will have a status of 403, and it will contain a key with a timeout with the value true ex: {timeout: true, ....}

Then we will handle this in the $ .ajaxError () event handler, which will handle the error. If the error status is 403 and the timeout value is true, I reload the page.

Answer 2

If I understand the situation, you do not need it. In the original ajax request, just add an error function that will redirect the user.

 errHandler = function(XMLHttpRequest, textStatus, errorThrown) { if( textStatus.match(/forbidden/i) ) { redirectUserToLoginHere(); } } $.ajax({ success: yourFunctionHere, error: errHandler }) 

Then you can create some ajax shell that always has this errHandler, so you don’t have to put it in every ajax call.

EDIT:

after some experiments, if the ajaxSend handler throws an error, then the original request will never be sent.

Also, if the handler does

 document.location = '/login'; 

then the original request is never sent.

Hope this helps :)