创建一个会话超时函数，可以在 angular 中显示计时器并在超时时重定向到上一页

Question

我想为支付页面创建一个会话超时功能，计时器将显示在我的网页上，5 分钟后，支付会话将过期，用户将被重定向到上一个页面。我在我的前端使用 angular 4，所以使用 href 不受欢迎，我想要一个只涉及 javascript 和 routerLink 和 typescript 的解决方案。有什么建议吗？

我正在使用此功能在网页上显示计时器，它可以正常工作但无法使用此处的 routerLink 重定向到上一页。

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']);

}

Answer 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);
}

现在您可以显示一个计时器，用户将被重定向。

如果您想要还原计时器：

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

Answer 2

是的，你可以这样做。

在你的组件 ts 文件中。

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

Answer 3

使用 rxjs timer Observable 和一些运算符将是一个干净的解决方案。

您可以创建两个 observable（应该实现 secondsToStringDate 函数，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)));

现在您已经创建了 Observable，您可以使用它们了：

到运行时间到期时所需的行为：

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

在模板中添加要显示时间的位置：

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

为了安全的解决方案，您应该添加后端解决方案而不是仅依赖 javascript。

创建一个会话超时函数，可以在 angular 中显示计时器并在超时时重定向到上一页

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

javascript

session

typescript

routerlink

angular