Javascript 如何向用户显示会话过期消息

当用户的会话在不活动30分钟后过期时，我们必须向用户显示弹出窗口，例如，如果用户在过去30分钟内未使用应用程序，则向他们显示您的会话已过期的消息

我们在应用程序中使用MVC#和AngularJs，并使用表单验证cookie。由于会话在服务器端，我们必须在客户端进行检查，如果我们执行任何Ajax点击检查会话，那么会话将被重新创建，并且永不过期

---

我如何才能做到这一点？

有两种方法可以做到这一点

1） 使用

ng Idle

这里是查看演示和下载该js文件的方法

var myApp = angular.module('myApp', ['ngIdle']); //inject ng-Idle in your app

myApp.config(['KeepaliveProvider', 'IdleProvider', function(KeepaliveProvider, IdleProvider) {
  IdleProvider.idle(30);
  IdleProvider.timeout(30);
  KeepaliveProvider.interval(10);//check every 10 mins..
}]);

2） 使用一点JQuery&Js

我认为下面这个小模板将给你期望的结果，即方法二

var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement means some activity is going on .
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 30) { // 30 minutes
        //call your custom pop up to show user that he is inactive for 30 mins
        window.location.reload();
    }
}

---

希望这些方法能让您了解如何实现您的结果。

您应该在页面中有一个标签，在页面加载时将该标签设置为会话的分钟数，例如：30:00分钟

现在您将创建一个每秒减少计时器的函数，请按照此链接查看如何输出计时器

现在，您必须在每次有对服务器的请求时重置计时器，当页面加载时，JavaScript代码将触发标签，该标签上的计时器将自动重置，但当有Ajax请求时，这不会发生。 要做到这一点，您必须编写以下代码，它将拦截JQuery完成的任何Ajax调用，并在其中重置计数器，这些代码应该位于布局中或加载在布局中的JavaScript文件中

$( document ).ajaxSend(function() {
  //Reset the counter here
});

---

当您发出请求时，然后将超时存储在viewdata中，在客户端的document ready上，您可以触发一个比较当前时间和会话超时的超时。当用户移动鼠标或按key@HaithamShaddad问题不在于续期，这是关于如何决定何时显示该用户在一段时间内处于非活动状态。您可以在函数timerIncrement（）中执行服务调用并使用户会话无效，并在指定时间结束后显示注销页面。谢谢。我正在寻找类似“ajaxSend”的东西，在那里我可以重置计数器。