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 :)