Idle settings does not survive browser refresh

[kshkrao3]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior When the browser is refreshed, the settings are gone and doesn't hold back the earlier settings or interval time attached

Expected behavior

Minimal reproduction of the problem with instructions The code provided in the GitHub to implement is sufficient to reproduce the issue.

What is the motivation / use case for changing the behavior? We have implemented this in SPA Angular 5 application with Spring boot on server side. We have implemented custom token granter via oAuth2.0 to authorize requests and token has to be refreshed before expiry and only if the user is not idle. If the user is idle, we will log him out of the application.

Please tell us about your environment:

• Windows 10

• Visual Studio Code

• NPM 5.6.0

• Angular 5.1.2

• Angular CLI - 1.6.0

• @ng-idle version: ^2.0.0-beta.13

• Browser: all

• Language: [TypeScript ^2.4.2]

• Node: node --version = 8.9.1

[tiboprea]

Any updates regarding this? I am using Angular 5.0.0 and I am experiencing the same issue.

A temporary fix might be to listen to all router changes, and check if the idle service has been started.

this.router.events
      .subscribe(event => {
        if (!timeoutService.idleStarted) {
          timeoutService.start();
        }
});

where 'idleStarted' keeps tracks if the idle watch has been started, and the 'start()' method from the timeout service starts the watch.

Not sure if this is the most optimal way to do it, but I couldn't find any other way to 'detect a refresh' of the page.

[kshkrao3]

@tiboprea Looks promising. But are you certain that timeoutService.start() persists keepAlive interval?

[tiboprea]

Nop, it doesn't retrieve the previous keepAlive interval, I am mainly just restarting idle.

  start() {
    this.idleStarted = true;
    this.idle.watch();
  }

Why would you need that though? Refreshing the page initialises the whole app again, so no point to have that persistent.

[kshkrao3]

@tiboprea Well in my case I have to maintain it since we are using OAuth token system to authorize and we need to get the new token before expiry and this ping will work based on certain conditions. So interval has to be persisted.

I think I can maintain it in sessionStorage and update it every second. Hope that works.

[moribvndvs]

I hadn't really designed it to survive refresh, since presumably refreshing the page is the ultimate act of letting your app know you're in there working. However, I suppose you could change the session storage so it's in localStorage instead of session. I'm not sure what long term effects are since I haven't really tested for that scenario.

[kshkrao3]

@HackedByChinese Thanks for the response. I assume that sessionStorage would be ultimate solution here since I do not want the interval to be shared between multiple tabs of same domain and gets cleared once user navigates/close the browser.

[madhujsmg]

Thanks for Response

@HackedByChinese how to change storage from local to session ???

[ramparvataneni]

Not the best way but you can change below line in localstorage.js file in your local ng-idle library to use session storage

var storage = sessionStorage;