How to redirect web application flow to specific page when session ends?

Question

I have a web application developed on AngularJS / Javascript, back-end is Java / Spring. I have an issue related to session management for my web application.

I have set the session timeout using the web.xml session-timeout parameter in session-config like below,

<session-config>
    <session-timeout>1</session-timeout>
</session-config>

Now after 1 minute, the session times out. I have a scenario where I need to redirect my web application flow to login page after the session has timed out.

Scenario 1 : If I click on any link / button which needs to load a new page, it automatically detects that the session has timed out and it redirects the application to login page. THIS WORKS FINE.

Scenario 2 : BUT if the page contains any drop-downs that I select, the application doesn't redirect to login page. THIS IS THE ISSUE.

What happens generally is when I chose any value from drop-down, it makes a rest call to back-end and fetch the data needed to fill in the values on the page. Now if the session has ended after a minute, and if I select the drop-down, it doesn't make any call to back-end as the session is over.

Now, in this scenario what should be done to make sure that even when I chose the drop-down and if the session is over, it will detect it somehow and redirect the application to login page. Is there a way using angular JS or javascript to check if the session is still alive when I chose the drop-down value and can redirect the flow as per need?

Considering the fact that when I chose the drop-down the flow doesn't go to back-end, I guess I might need to handle this redirection at client side only (front-end) instead of back-end. Not sure how to do that though.

Any help would be appreciated.

Answer 1

You can make use of http intercetor to help you here. Basically, interceptor will be executed every time you make a request, make an error while making a request, when you response or when you get error in response. Depending upon response status, you can redirect the control to an error page.

app.factory('CustomHttpInterceptor',[ '$q' , '$location', function( $q , $location, TimeoutBroadCaster ){
        return{
            request: function(config) {
                return config;
            },

            requestError: function(config) {
                return config;
            },

            response: function(res) {
                return res;
            },

            responseError: function(res) {              
                if(res.status != 200){
                     $location.path( 'timed-out' );
                }
                return res;
            }
        }

    }

    ]);

And then in config method at application start up, you push this interceptor in queue with

$httpProvider.interceptors.push('CustomHttpInterceptor');

To make things easier, at server end, you can come up with some custom error status which can help you determine if session had timed out and write check specifically for that condition.