jQuery Ajax – Handling unauthenticated requests via Ajax

Since few days I am working on a small project where I have to deal with lot of Ajax requests. The whole UI is designed such that only appropriate parts are refreshed with required information through Ajax. The application needs user authentication before accessing any part of it. Although this is easy to achieve in any MVC based framework, its a whole new thing when dealing with Ajax requests. In a normal request/response based MVC application, if a user is not authenticated and tries to view a webpage, the request is redirected to the Login page. Almost all MVC framework comes with this functionality. When the request gets redirected to Login page, the Status Code 403 (Forbidden) is set in HTTP header. 403 Forbidden is a HTTP status code returned by a web server when a user agent requests a resource that the server does not allow them to. But when using Ajax for getting the content, if the request is redirected to Login page, it is difficult to handle this scenario. Here is a simplest solution that can be implemented in your Ajax based application. Just add this code in your Javascript file.
$(document).ready( function() { $("body").ajaxError( function(e,request) { if (request.status == 403) { window.location.reload(); //window.location.href = "/myapp/login"; } } ); } );
Code language: JavaScript (javascript)
In above code, we have added a handler function to ajaxError which gets called by jQuery whenever there is an error in the HTTP Response. The function checks if the status code is 403, if it is then it simply tries to reload the URL. This generate a new request to the server which automatically gets redirected to the login page. The only disadvantage of reloading the page is that you generate a new HTTP request which server has to handle and redirect to Login page. You may wish to directly redirect user to login page from client code itself. Check the Line XX where we are changing the windows location and redirecting user. I personally dont like this method as you have to hard code the path for login page in javascript. I prefer using the previous solution to reload the page. I am sure there must be several way of implementing this in Javascript. Share yours if you think you have a better one :)
Get our Articles via Email. Enter your email address.

You may also like...

2 Comments

  1. venkat says:

    hello all, i would like to read the database table data dynamically using ajax with struts framework. for this can u please suggest me to do that application, ofcourse i m much Familiar with struts but i m beginner with ajax thats main problem here. could you please give me the reply as early as possible. Hope this application will be good.

    Thanks in Advance.

  2. sunil tariyal says:

    sir, thanks for the tutorials. its very helpful but i am new at learning ajax. so can u send me simple example for ajax like only form submission, content change viaa server etc

Leave a Reply

Your email address will not be published. Required fields are marked *