PHP, JQuery.load and expiring sessions - catching errors

Question

I'm a relative newbie to web development:

When the PHP session expires, my navigation bar, which is based on JQuery.load stops functioning, as I guess it can no longer load the requested page. The UX is "freeze". How do I detect such a load failure and re-direct folks back to the login screen (after perhaps alerting them the session expired)?

Here's the code I use:

function loadPage(page)
    {
        switch (page)
        {
            case 1: // dashboard
                this.pageToLoad = 'pages/page1.php';
                break;
            case 16: // another page
                this.pageToLoad = 'pages/page2.php';
                break;
            default: // unimplemented for all the rest 
                this.pageToLoad = 'pages/unimplemented.php';
                break;
        }

        $('.myNav').load(this.pageToLoad);
    }

Please supply some code. Otherwise it is very difficult for us to help you. — Richard Parnaby-King, Mar 09 '15 at 16:03
Please review the page about how to ask a question: http://stackoverflow.com/help/how-to-ask — Sparky, Mar 09 '15 at 16:05

score 1 · Answer 1 · answered Mar 09 '15 at 21:28

I think you need to use the callback function for $.load :

...
...
$('.myNav').load(this.pageToLoad, function(response, status, xhr) {
    if (status == "error") {
       console.log(msg + xhr.status + " " + xhr.statusText);
       $(location).attr('href', "/login.php");
    }
});

score 1 · Answer 2 · answered Mar 11 '15 at 05:12

You need to 'ping' the server to check if the user is still logged in.

window.setInterval(ping, 60000);
function ping() {
    $.ajax('/authcheck')
        .done(function(){
            console.log('done');
            // user is still logged in
        })
        .fail(function () {
            console.log('fail');
            // location.href = "/user/login";
            // user is no longer logged in
        });
}

The /authcheck URL should return 200 or 204 if the session is still active or a 403 (or other code) to indicate the session has timed out.

score 1 · Answer 3 · edited May 23 '17 at 12:14

You can use the load callback function to detect load failures and redirect the user to the login page.

The simplest way I see to upgrade your code is this:

function loadPage(page) {
    switch (page) {
        case 1: // dashboard
            this.pageToLoad = 'pages/page1.php';
            break;
        case 16: // another page
            this.pageToLoad = 'pages/page2.php';
            break;
        case 32: // login page
            this.pageToLoad = 'pages/login.php';
            break;
        default: // unimplemented for all the rest 
            this.pageToLoad = 'pages/unimplemented.php';
            break;
    }

    $('.myNav').load(this.pageToLoad, function(response, status, xhr) {
        if (status == "error") {
            loadPage(32);
        }
    });
}

You can improve the detection of the session expiration changing the if (status == "error") condition.

For example, if your system returns appropriately a 401 status code on session expiration you can change the condition to if (xhr.status == 401).

Another reason to improve that condition is that the example code I proposed can cause an infinite loading loop if the login page loading fails. But I wanted to be concise. :)

score 0 · Accepted Answer · answered Mar 09 '15 at 16:03

Without some code I am guessing you are doing something like:

$('.nav').load('/some/url .nav');

What does the server return when the user is logged out? Does it return a 404? 403?

I would change the .load for a .get. As I've mentioned, without you supplying any code I am only guessing how your system is working. Here, I am making the assumption that the div.nav simply does not exists if the user is not logged in:

$('.nav').get('/some/url', function(data){
  var nav = $(data).find('.nav');
  if(nav.length === 0) {
    // not logged in. No nav to show. Redirect user to where they can log in
    alert('Not Logged In. You will now be redirected');
    location.href="/some/url/to/login";
    return false;
  }
  //logged in. Replace nav
  $('.nav').replaceWith(nav);
});

PHP, JQuery.load and expiring sessions - catching errors

4 Answers4