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

Question

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

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

我怎样才能做到这一点？

Answer 1

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

1) 使用 ng-Idle 这里是 link 查看演示并下载那个 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();
    }
}

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

Answer 2

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

现在你将创建一个每秒减少计时器的函数，按照这个link看看你如何输出一个计时器Code for a simple JavaScript countdown timer?

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

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

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

How to show session expire message to User

javascript

angularjs

asp.net-mvc

session-cookies

form-authentication