是否可以使用 angularjs 确定用户是否处于非活动状态并在 10 分钟不活动后自动将其注销？
我试图避免使用 jQuery，但我找不到任何关于如何在 angularjs 中执行此操作的教程或文章。任何帮助，将不胜感激。
问问题
106442 次
11 回答
113
我写了一个名为的模块Ng-Idle，在这种情况下可能对你有用。这是包含说明和演示的页面。
基本上，它有一个服务，可以为您的空闲持续时间启动一个计时器，该计时器可能会被用户活动（事件，如点击、滚动、打字）中断。您还可以通过调用服务上的方法手动中断超时。如果超时没有中断，那么它会倒计时一个警告，您可以在其中提醒用户他们将被注销。如果在警告倒计时达到 0 后它们没有响应，则会广播一个事件，您的应用程序可以响应该事件。在您的情况下，它可能会发出请求以终止他们的会话并重定向到登录页面。
此外，它还有一个保持活动状态的服务，可以每隔一段时间 ping 一些 URL。您的应用可以使用此功能在用户处于活动状态时保持用户会话处于活动状态。idle 服务默认与 keep-alive 服务集成，如果它们空闲则暂停 ping，并在它们返回时恢复它。
您需要开始的所有信息都在该站点上，更多详细信息请参见wiki。但是，这里有一段配置显示如何在它们超时时将它们注销。
angular.module('demo', ['ngIdle'])
// omitted for brevity
.config(function(IdleProvider, KeepaliveProvider) {
IdleProvider.idle(10*60); // 10 minutes idle
IdleProvider.timeout(30); // after 30 seconds idle, time the user out
KeepaliveProvider.interval(5*60); // 5 minute keep-alive ping
})
.run(function($rootScope) {
$rootScope.$on('IdleTimeout', function() {
// end their session and redirect to login
});
});
于 2014-01-30T13:23:08.577 回答
25
查看正在使用的Demoangularjs并查看您的浏览器日志
<!DOCTYPE html>
<html ng-app="Application_TimeOut">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>
<body>
</body>
<script>
var app = angular.module('Application_TimeOut', []);
app.run(function($rootScope, $timeout, $document) {
console.log('starting run');
// Timeout timer value
var TimeOutTimerValue = 5000;
// Start a timeout
var TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
var bodyElement = angular.element($document);
/// Keyboard Events
bodyElement.bind('keydown', function (e) { TimeOut_Resetter(e) });
bodyElement.bind('keyup', function (e) { TimeOut_Resetter(e) });
/// Mouse Events
bodyElement.bind('click', function (e) { TimeOut_Resetter(e) });
bodyElement.bind('mousemove', function (e) { TimeOut_Resetter(e) });
bodyElement.bind('DOMMouseScroll', function (e) { TimeOut_Resetter(e) });
bodyElement.bind('mousewheel', function (e) { TimeOut_Resetter(e) });
bodyElement.bind('mousedown', function (e) { TimeOut_Resetter(e) });
/// Touch Events
bodyElement.bind('touchstart', function (e) { TimeOut_Resetter(e) });
bodyElement.bind('touchmove', function (e) { TimeOut_Resetter(e) });
/// Common Events
bodyElement.bind('scroll', function (e) { TimeOut_Resetter(e) });
bodyElement.bind('focus', function (e) { TimeOut_Resetter(e) });
function LogoutByTimer()
{
console.log('Logout');
///////////////////////////////////////////////////
/// redirect to another page(eg. Login.html) here
///////////////////////////////////////////////////
}
function TimeOut_Resetter(e)
{
console.log('' + e);
/// Stop the pending timeout
$timeout.cancel(TimeOut_Thread);
/// Reset the timeout
TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
}
})
</script>
</html>
下面的代码是纯javascript版本
<html>
<head>
<script type="text/javascript">
function logout(){
console.log('Logout');
}
function onInactive(millisecond, callback){
var wait = setTimeout(callback, millisecond);
document.onmousemove =
document.mousedown =
document.mouseup =
document.onkeydown =
document.onkeyup =
document.focus = function(){
clearTimeout(wait);
wait = setTimeout(callback, millisecond);
};
}
</script>
</head>
<body onload="onInactive(5000, logout);"></body>
</html>
更新
我将我的解决方案更新为@Tom 建议。
<!DOCTYPE html>
<html ng-app="Application_TimeOut">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>
<body>
</body>
<script>
var app = angular.module('Application_TimeOut', []);
app.run(function($rootScope, $timeout, $document) {
console.log('starting run');
// Timeout timer value
var TimeOutTimerValue = 5000;
// Start a timeout
var TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
var bodyElement = angular.element($document);
angular.forEach(['keydown', 'keyup', 'click', 'mousemove', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart', 'touchmove', 'scroll', 'focus'],
function(EventName) {
bodyElement.bind(EventName, function (e) { TimeOut_Resetter(e) });
});
function LogoutByTimer(){
console.log('Logout');
///////////////////////////////////////////////////
/// redirect to another page(eg. Login.html) here
///////////////////////////////////////////////////
}
function TimeOut_Resetter(e){
console.log(' ' + e);
/// Stop the pending timeout
$timeout.cancel(TimeOut_Thread);
/// Reset the timeout
TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
}
})
</script>
</html>
于 2015-09-18T03:11:02.660 回答
19
应该有不同的方法来做到这一点，并且每种方法都应该比另一种更适合特定的应用程序。对于大多数应用程序，您可以简单地处理键或鼠标事件并适当地启用/禁用注销计时器。也就是说，在我的脑海中，一个“花哨的”AngularJS-y 解决方案正在监视摘要循环，如果在最后一个 [指定持续时间] 内没有触发，则注销。像这样的东西。
app.run(function($rootScope) {
var lastDigestRun = new Date();
$rootScope.$watch(function detectIdle() {
var now = new Date();
if (now - lastDigestRun > 10*60*60) {
// logout here, like delete cookie, navigate to login ...
}
lastDigestRun = now;
});
});
于 2013-10-03T21:24:20.003 回答
11
玩过 Boo 的方法，但不喜欢用户只有在运行另一个摘要时才被启动的事实，这意味着用户保持登录状态，直到他尝试在页面内做某事，然后立即启动。
我正在尝试使用间隔强制注销，如果上次操作时间超过 30 分钟，则每分钟检查一次。我把它挂在 $routeChangeStart 上，但也可以挂在 $rootScope.$watch 上，就像在 Boo 的例子中一样。
app.run(function($rootScope, $location, $interval) {
var lastDigestRun = Date.now();
var idleCheck = $interval(function() {
var now = Date.now();
if (now - lastDigestRun > 30*60*1000) {
// logout
}
}, 60*1000);
$rootScope.$on('$routeChangeStart', function(evt) {
lastDigestRun = Date.now();
});
});
于 2014-11-26T20:32:51.487 回答
6
您还可以angular-activity-monitor以比注入多个提供者更直接的方式完成使用，并且它使用setInterval()（与 angular's 相比$interval）来避免手动触发摘要循环（这对于防止无意中使项目保持活动状态很重要）。
最终，您只需订阅一些确定用户何时处于非活动状态或变得接近的事件。因此，如果您想在 10 分钟不活动后注销用户，您可以使用以下代码段：
angular.module('myModule', ['ActivityMonitor']);
MyController.$inject = ['ActivityMonitor'];
function MyController(ActivityMonitor) {
// how long (in seconds) until user is considered inactive
ActivityMonitor.options.inactive = 600;
ActivityMonitor.on('inactive', function() {
// user is considered inactive, logout etc.
});
ActivityMonitor.on('keepAlive', function() {
// items to keep alive in the background while user is active
});
ActivityMonitor.on('warning', function() {
// alert user when they're nearing inactivity
});
}
于 2016-01-12T04:13:06.773 回答
3
ng-Idle 看起来像是要走的路，但我无法弄清楚 Brian F 的修改，也想超时进行睡眠会话，我也想到了一个非常简单的用例。我将其缩减为下面的代码。它挂钩事件以重置超时标志（延迟放置在 $rootScope 中）。它仅在用户返回（并触发事件）时检测到发生超时，但这对我来说已经足够了。我无法让 angular 的 $location 在这里工作，但同样，使用 document.location.href 可以完成工作。
.config 运行后，我将其卡在了我的 app.js 中。
app.run(function($rootScope,$document)
{
var d = new Date();
var n = d.getTime(); //n in ms
$rootScope.idleEndTime = n+(20*60*1000); //set end time to 20 min from now
$document.find('body').on('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart', checkAndResetIdle); //monitor events
function checkAndResetIdle() //user did something
{
var d = new Date();
var n = d.getTime(); //n in ms
if (n>$rootScope.idleEndTime)
{
$document.find('body').off('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart'); //un-monitor events
//$location.search('IntendedURL',$location.absUrl()).path('/login'); //terminate by sending to login page
document.location.href = 'https://whatever.com/myapp/#/login';
alert('Session ended due to inactivity');
}
else
{
$rootScope.idleEndTime = n+(20*60*1000); //reset end time
}
}
});
于 2014-04-05T15:57:11.810 回答
3
我尝试了 Buu 的方法，但由于触发消化器执行的事件数量众多，包括 $interval 和 $timeout 函数的执行，因此无法完全正确。这使应用程序处于一种无论用户输入如何都永远不会空闲的状态。
如果您确实需要跟踪用户空闲时间，我不确定是否有一个好的角度方法。我建议这里的 Witoldz 代表一种更好的方法https://github.com/witoldsz/angular-http-auth。当采取需要其凭据的操作时，此方法将提示用户重新进行身份验证。用户通过身份验证后，先前失败的请求被重新处理，应用程序继续运行，就好像什么都没发生一样。
这解决了您可能担心让用户的会话在他们处于活动状态时过期，因为即使他们的身份验证过期，他们仍然能够保留应用程序状态并且不会丢失任何工作。
如果您的客户端上有某种会话（cookie、令牌等），您也可以观察它们并在它们过期时触发您的注销过程。
app.run(['$interval', function($interval) {
$interval(function() {
if (/* session still exists */) {
} else {
// log out of client
}
}, 1000);
}]);
更新：这是一个证明关注的问题。http://plnkr.co/edit/ELotD8W8VAeQfbYFin1W。这表明消化器运行时间仅在间隔滴答时更新。一旦间隔达到最大计数，消化器将不再运行。
于 2014-01-17T15:44:34.897 回答
1
我为此使用了 ng-idle 并添加了一些注销和令牌空代码，它工作正常，你可以试试这个。感谢@HackedByChinese 制作了这么好的模块。
在IdleTimeout中，我刚刚删除了我的会话数据和令牌。
这是我的代码
$scope.$on('IdleTimeout', function () {
closeModals();
delete $window.sessionStorage.token;
$state.go("login");
$scope.timedout = $uibModal.open({
templateUrl: 'timedout-dialog.html',
windowClass: 'modal-danger'
});
});
于 2017-03-03T04:34:31.583 回答
1
我想将答案扩展到可能在更大项目中使用它的任何人，您可能会不小心附加多个事件处理程序，并且程序的行为会很奇怪。
为了摆脱这种情况，我使用了一个由工厂公开的单例函数，您可以从中调用inactivityTimeoutFactory.switchTimeoutOn()，并inactivityTimeoutFactory.switchTimeoutOff()在您的角度应用程序中分别激活和停用由于不活动功能而导致的注销。
这样，无论您尝试激活超时过程多少次，您都可以确保只运行事件处理程序的单个实例，从而更容易在用户可能从不同路径登录的应用程序中使用。
这是我的代码：
'use strict';
angular.module('YOURMODULENAME')
.factory('inactivityTimeoutFactory', inactivityTimeoutFactory);
inactivityTimeoutFactory.$inject = ['$document', '$timeout', '$state'];
function inactivityTimeoutFactory($document, $timeout, $state) {
function InactivityTimeout () {
// singleton
if (InactivityTimeout.prototype._singletonInstance) {
return InactivityTimeout.prototype._singletonInstance;
}
InactivityTimeout.prototype._singletonInstance = this;
// Timeout timer value
const timeToLogoutMs = 15*1000*60; //15 minutes
const timeToWarnMs = 13*1000*60; //13 minutes
// variables
let warningTimer;
let timeoutTimer;
let isRunning;
function switchOn () {
if (!isRunning) {
switchEventHandlers("on");
startTimeout();
isRunning = true;
}
}
function switchOff() {
switchEventHandlers("off");
cancelTimersAndCloseMessages();
isRunning = false;
}
function resetTimeout() {
cancelTimersAndCloseMessages();
// reset timeout threads
startTimeout();
}
function cancelTimersAndCloseMessages () {
// stop any pending timeout
$timeout.cancel(timeoutTimer);
$timeout.cancel(warningTimer);
// remember to close any messages
}
function startTimeout () {
warningTimer = $timeout(processWarning, timeToWarnMs);
timeoutTimer = $timeout(processLogout, timeToLogoutMs);
}
function processWarning() {
// show warning using popup modules, toasters etc...
}
function processLogout() {
// go to logout page. The state might differ from project to project
$state.go('authentication.logout');
}
function switchEventHandlers(toNewStatus) {
const body = angular.element($document);
const trackedEventsList = [
'keydown',
'keyup',
'click',
'mousemove',
'DOMMouseScroll',
'mousewheel',
'mousedown',
'touchstart',
'touchmove',
'scroll',
'focus'
];
trackedEventsList.forEach((eventName) => {
if (toNewStatus === 'off') {
body.off(eventName, resetTimeout);
} else if (toNewStatus === 'on') {
body.on(eventName, resetTimeout);
}
});
}
// expose switch methods
this.switchOff = switchOff;
this.switchOn = switchOn;
}
return {
switchTimeoutOn () {
(new InactivityTimeout()).switchOn();
},
switchTimeoutOff () {
(new InactivityTimeout()).switchOff();
}
};
}
于 2017-12-21T14:48:40.167 回答
1
我认为布欧的消化循环手表是天才。感谢分享。正如其他人所指出的， $interval 也会导致摘要循环运行。我们可以出于自动注销用户的目的使用 setInterval ，这不会导致摘要循环。
app.run(function($rootScope) {
var lastDigestRun = new Date();
setInterval(function () {
var now = Date.now();
if (now - lastDigestRun > 10 * 60 * 1000) {
//logout
}
}, 60 * 1000);
$rootScope.$watch(function() {
lastDigestRun = new Date();
});
});
于 2015-09-24T07:03:32.617 回答
0
[在应用程序参考 js 文件中添加以下脚本][1] [1]：https://rawgit.com/hackedbychinese/ng-idle/master/angular-idle.js
var mainApp = angular.module('mainApp', ['ngIdle']);
mainApp.config(function (IdleProvider, KeepaliveProvider) {
IdleProvider.idle(10*60); // 10 minutes idel user
IdleProvider.timeout(5);
KeepaliveProvider.interval(10);
});
mainApp
.controller('mainController', ['$scope', 'Idle', 'Keepalive', function ($scope,
Idle, Keepalive) {
//when login then call below function
Idle.watch();
$scope.$on('IdleTimeout', function () {
$scope.LogOut();
//Logout function or redirect to logout url
});
});
于 2021-07-08T13:16:22.090 回答