grbsk / ng-idle

Responding to idle users in AngularJS applications.
http://hackedbychinese.github.io/ng-idle
MIT License
564 stars 195 forks source link

Persist watch on page reload/refresh #197

Closed thejonamreddy closed 7 years ago

thejonamreddy commented 7 years ago

Hi Folks,

In my application, i have a token that expires in 60mins. There is no concept of refresh token in the application. Hence, i am using ngIdle to show a warning saying "Your session expires in 10mins minutes" after 50mins. My Idle configuration is as below:

IdleProvider.interrupt('');
IdleProvider.idle(3000);
IdleProvider.timeout(600);

I am disabling all interrupt events since i don't want anything to interrupt. And i am calling Idle.watch() after successful login.

Now, everything works fine. The Idle Warning hits on time. Even the timeout. However, when i refresh the page after the idle warning is hit, the entire Idling concept is gone. I understand that Idle is reset and i have to manually call Idle.watch() to restart.

But, my requirement is to resume the Idle watch and not reset it.

How can i modify such that even after i refresh a page, the Idle Warning countdown resumes?

Regards, Manoj

grbsk commented 7 years ago

So you basically have an absolute expiration, right? Idle is completely based on setInterval, which cannot persist when a page reloads. It's possible that a new feature can be added to enable an absolute mode, where we record the start and end time in localStorage and if those values exist when we start watching, just set the timeout to the difference between the two (or time them out if the value has been exceeded). Is that essentially what you're talking about?

thejonamreddy commented 7 years ago

Thank you @HackedByChinese for your response.

Yes, i am looking for what you just said. Here is what i'm currently doing as an alternative (same as what you suggested).

After login, i am saving the following information in localStorage:

localStorage.setItem('session', JSON.stringify({
                        expiresIn: 60, //minutes
                        timestamp: new Date()
                    }));

Then, in my master controller(in my angularjs app), i use the below logic to handle warning and timeout:

var session,
    currentDateTime,
    warningDateTime,
    timeoutDateTime,
    timer;

session = JSON.parse(localStorage.getItem('session'));

warningDateTime = timeoutDateTime = new Date(session.timestamp);
warningDateTime = new Date(warningDateTime.getTime() + ((session.expiresIn - 5) * 60 * 1000)); //Show a warning five minutes before timeout
timeoutDateTime = new Date(timeoutDateTime.getTime() + (session.expiresIn * 60 * 1000));

timer = setInterval(function () {
    currentDateTime = new Date();
    if (currentDateTime > timeoutDateTime) {
        //Timeout
    } else if (currentDateTime > warningDateTime) {
        //Warning
    }
}, 1000);

This way, even after i refresh, i am able to resume the watch.

thejonamreddy commented 7 years ago

Closing since an alternate solution to the problem was found.