Вы работаете над отличным приложением и хотите вывести из системы пользователей, которые не ведут никаких действий в течение определенного времени в приложении - да, они этого заслуживают (шутка: D)
Существует имя пакета ng-idle, которое вы можете использовать в этой ситуации, и у них также есть версия для Angular 2+, если вы хотите попробовать ее. Однако в этой статье я сделаю демонстрацию на AngularJS 1.x - Да, сейчас я работаю с этими старыми модными парнями.
Если вы хотите взглянуть на конечный продукт, вы можете сделать это в Plunker.
Создайте проект AngularJS
Ну, вам просто нужен html и / или файл JavaScript для запуска проекта AngularJS.
// index.html <!doctype html> <html ng-app="myApp"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-idle/1.3.2/angular-idle.min.js"></script> <script src="app.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <section ng-controller="DemoCtrl"> <p> <button type="button" class="btn btn-success" ng-hide="started" ng-click="start()">Start Demo</button> <button type="button" class="btn btn-danger" ng-show="started" ng-click="stop()">Stop Demo</button> </p> </section> </body> </html>
Сначала я встроил angularjs и angular-idle в заголовок html-файла. Остальные просто для украшения.
// app.js angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ngIdle']); angular.module('myApp').config(['KeepaliveProvider', 'IdleProvider', function(KeepaliveProvider, IdleProvider) {// configure Idle settings
IdleProvider.idle(5); IdleProvider.timeout(5); KeepaliveProvider.interval(10); IdleProvider.interrupt('keydown wheel mousedown touchstart touchmove scroll'); }]); angular.module('myApp').controller('DemoCtrl', function ($scope, Idle, Keepalive, $uibModal) { $scope.$on('IdleStart', function() {// the user appears to have gone idle
}); $scope.$on('IdleTimeout', function() {// the user has timed out, let log them out
}); $scope.$on('IdleEnd', function() {// the user has come back from AFK and is doing stuff
}); }); angular.module('myApp').config(function(IdleProvider, KeepaliveProvider) { IdleProvider.idle(5); IdleProvider.timeout(5); KeepaliveProvider.interval(10); });
Создать модальное окно для предупреждения и тайм-аута
Предупреждение Модальное окно - это будет отображаться до истечения времени ожидания
// warning-dialog.html <div class="modal-header"> <h3 class="modal-title" id="modal-title">{{ pc.title }}</h3> </div> <div idle-countdown="countdown" ng-init="countdown=5" class="modal-body" id="modal-body"> <uib-progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</uib-progressbar> </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="pc.ok()">OK</button> <button class="btn btn-warning" type="button" ng-click="pc.cancel()">Cancel</button> </div>
Модальное окно тайм-аута - отображается после модального окна предупреждения, и пользователь ничего не делает. На этом этапе пользователь уже вышел из системы.
// timeout-dialog.html <div class="modal-header"> <h3 id="modal-title">You've Timed Out!</h3> </div> <div class="modal-body" id="modal-body"> <p> You were idle too long... </p> </div>
Пожалуйста, проверьте Plunker, чтобы увидеть полный рабочий проект.
Надеюсь это поможет :)