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

我想为付款页面创建一个会话超时功能，计时器将显示在我的网页中，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']);

paymentSessionTimer（）{
let downloadButton=document.getElementById（“paymentSession”）；
var计数器=600；
var newElement=document.createElement（“p”）；
newElement.innerHTML=“10”；
变量id；
this.redirectFlag=“false”；
downloadButton.parentNode.replaceChild（新元素，downloadButton）；
id=setInterval（函数（）{
计数器--；
如果（计数器<0）{
newElement.parentNode.replaceChild（下载按钮，newElement）；
清除间隔（id）；
this.redirectFlag=“true”；
//this.router.navigate（['../search']）；
}否则{
newElement.innerHTML=counter.toString（）+“还剩几秒钟。”；
}
}, 1000);
this.router.navigate（['../previous']）；

}

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

如果您想要恢复的计时器：

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

this.timer.s-=1；
如果（此计时器s<0）{
这个.timer.s=59；
this.timer.mn=-1；
}

是的，你可以这样做

在组件ts文件中

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

使用rxjs Observable和一些操作符将是一个干净的解决方案

您可以创建两个可观察对象（应该实现

secondsToStringDate

函数）：

现在您已经创建了可观察对象，您可以使用它们：

要在时间到期时运行所需的行为，请执行以下操作：

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}}

{{sessionRemainingTime$| async}

---

对于一个安全的解决方案，您应该添加一个后端解决方案，而不仅仅依赖javascript。

到目前为止您尝试了什么？出于安全原因，出于这种目的，始终需要后端解决方案。这并不意味着他不能在前端创建一个有计时器的漂亮页面。我不打算使用后端，我只想显示一条警告消息，并想重定向到上一页。@ibenjelloun我已经添加了我正在使用的函数，这有帮助吗？有一种返回上一页的方法，并且解决方案中没有计时器。我需要安装位置模块吗@trichetricheNo，它是

通用

模块的一部分，该模块是核心模块之一。

错误类型错误：无法读取未定义

的属性's'，获取

this.timer.s

的此错误。您是否将

timer

声明为类的成员？（我知道这个错误是从哪里来的，别担心）哦，糟了，对不起，我错过了计时器的声明

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}}