Creating a session timeout function, which can display timer and redirect to previous page on timeout in angular

Question

I want to create a session timeout function for a payment page, where the timer will be displayed in my webpage and after 5 minutes, the payment session will expire and user is redirected to the previous page. I am using angular 4 for my front end, so using href is not entertained, i want a solution involving just javascript and routerLink and typescript. Any suggestions?

I am using this function to show the timer on webpage, its working but not am unable to use routerLink here to redirect to previous page.

paymentSessionTimer() {
let downloadButton = document.getElementById("paymentSession");
var counter = 600;
var newElement = document.createElement("p");
newElement.innerHTML = "10";
var id;
this.redirectFlag = "false";

downloadButton.parentNode.replaceChild(newElement, downloadButton);

id = setInterval(function() {
  counter--;
  if(counter < 0) {
      newElement.parentNode.replaceChild(downloadButton, newElement);
      clearInterval(id);

      this.redirectFlag = "true";     
      //this.router.navigate(['../search']);
  } else {
    newElement.innerHTML = counter.toString() + " seconds left.";  
  }
}, 1000);
this.router.navigate(['../previous']);

}

What did you try so far ? For security reasons, a backend solution will always be required for this kind of purpose. — ibenjelloun, Jun 04 '18 at 06:31
That doesn't mean he can't make a pretty page with a timer on the front end — , Jun 04 '18 at 06:34
I am not going for backend, i just want to show an alert message and want to redirect to previous page. — BlizZard, Jun 04 '18 at 06:34
@ibenjelloun i have added the function i am using , can it help? — BlizZard, Jun 04 '18 at 06:36

score 1 · Accepted Answer · answered Jun 04 '18 at 06:33

1

import { Location } from '@angular/common';

timer = {s: 0, mn: 0};

constructor(private location: Location) {
  setTimeout(() => {
    this.location.back();
  }, 300000);

  setInterval(() => {
    this.timer.s += 1;
    if (this.timer.s > 59) {
      this.timer.s = 0;
      this.timer.mn += 1;
    }
  }, 1000);
}

Now you can display a timer and the user will be redirected.

If you want a reverted timer :

    this.timer.s -= 1;
    if (this.timer.s < 0) {
      this.timer.s = 59;
      this.timer.mn = -1;
    }

answered Jun 04 '18 at 06:33

Do i need to install Location module? @trichetriche – BlizZard Jun 04 '18 at 06:43
No, it's part of the `common` module, which is one of the core modules. – Jun 04 '18 at 06:43
`ERROR TypeError: Cannot read property 's' of undefined` getting this error for `this.timer.s` – BlizZard Jun 04 '18 at 06:50
Did you declare `timer` as a member of your class ? (and I know where you get that error from, don't worry) – Jun 04 '18 at 06:50
Ohh crap, sorry i was missing the declaration of timer – BlizZard Jun 04 '18 at 06:56
Well, i didn't used this solution, but modified my own function for redirection also. But thanks for your help – BlizZard Jun 04 '18 at 07:00
I didn't see your function, but you should avoid doign that. DOM modification should be made only by Angular, not by you. – Jun 04 '18 at 07:04

score 0 · Answer 2 · answered Jun 04 '18 at 06:33

0

Yes you can do that like this.

in your component ts file.

constructor(private router: Router) {
     setTimeout(() => {
       this.routerNavigate(['/routeYouWantToNavigate']);
     }, 300000);
  }

answered Jun 04 '18 at 06:33

Anuradha Gunasekara

6,553
2
27
37

There's a method made for returning to the previous page, and there's no timer in your solution. – Jun 04 '18 at 06:34

ibenjelloun · Answer 3 · 2018-06-04T08:37:18.510

Using rxjs timer Observable and some operators would be a clean solution.

You could create two observables (the secondsToStringDate function should be implemented, example) :

// Fires every second for 5 minutes then completes
sessionExpiration$ = timer(1000).pipe(take(60 * 5));

// Every second, generate a displayable string mm:ss
sessionRemainingTime$ = sessionExpiration$
 .pipe(map(seconds => secondsToStringDate(seconds)));

Now that you created your Observables, you can use them :

To run the desired behavior when the time expires :

sessionExpiration$.pipe(finalize(() => {
    // Fired when the sessionExpiration$ observable completes
    // You can put what you want to do when session expires
}).subscribe();

To add where you want to display time in your template :

<!-- Will display the time in the template --> 
{{sessionRemainingTime$ | async}}

For a secure solution, you should add a backend solution and not rely only on the javascript.

Creating a session timeout function, which can display timer and redirect to previous page on timeout in angular

3 Answers3