유휴 사용자에 따라 Angularjs를 사용한 자동 로그아웃
사용자가 비활성 상태인지 확인하고 angularjs를 사용하여 비활성 상태라고 10분 후에 자동으로 로그아웃할 수 있습니까?
jQuery를 사용하지 않으려고 했는데 angularjs에서 이 작업을 수행하는 방법에 대한 튜토리얼이나 기사를 찾을 수 없습니다.어떤 도움이라도 주시면 감사하겠습니다.
는 '모듈'이라는 모듈을 썼어요.Ng-Idle이 상황에서 당신에게 유용할 수 있습니다.여기 설명서와 데모가 있는 페이지가 있습니다.
기본적으로 사용자 액티비티(클릭, 스크롤, 입력 등)에 의해 중단될 수 있는 아이돌 기간 타이머를 기동하는 서비스가 있습니다.서비스의 메서드를 호출하여 수동으로 타임아웃을 중단할 수도 있습니다.타임아웃이 중단되지 않으면 로그아웃을 사용자에게 알릴 수 있는 경고가 카운트다운됩니다.경고 카운트다운이 0에 도달한 후 응답하지 않으면 응용 프로그램이 응답할 수 있는 이벤트가 브로드캐스트됩니다.이 경우 세션 종료 요청을 발행하고 로그인 페이지로 리디렉션할 수 있습니다.
또한 일정 간격으로 일부 URL을 ping할 수 있는 킵얼라이브 서비스도 있습니다.이 기능을 사용하면 사용자의 세션이 활성화되어 있는 동안 사용자의 세션을 유지할 수 있습니다.디폴트로는 아이돌서비스는 킵얼라이브서비스와 통합되어 아이돌 상태가 되면 ping을 일시정지하고 복귀하면 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
});
});
사용 중인 데모 보기angularjs도 볼 수 있습니다.
<!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>
다른 방법이 있어야 하며, 각각의 접근 방식이 다른 애플리케이션보다 특정 애플리케이션에 더 적합해야 합니다.대부분의 앱에서는 키 또는 마우스 이벤트를 처리하고 로그아웃 타이머를 적절하게 활성화/비활성화할 수 있습니다.내 머리 위에는 '화려한' 앵글이 있고JS-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;
});
});
그러나 Boo의 접근법에 따라 재생되는 것은 사용자가 다른 다이제스트가 실행되었을 때에만 로그아웃된다는 사실을 좋아하지 않는다. 즉, 사용자가 페이지 내에서 뭔가를 하려고 할 때까지 로그인한 상태로 있다가 바로 실행된다는 것을 의미한다.
마지막 액션 시간이 30분 이상 전이었는지 매분 체크하는 간격을 사용하여 강제로 로그오프하려고 합니다.$route Change Start에 접속했지만 $root Scope에도 접속할 수 있었습니다.$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();
});
});
또, 복수의 프로바이더를 투입하는 것보다, 보다 간단하게 사용할 수 있습니다.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
});
}
Buu의 어프로치를 시험해 봤지만 $interval이나 $timeout 함수 실행 등 디지스터 실행을 촉발하는 이벤트의 수가 너무 많아서 제대로 이해하지 못했습니다.이것에 의해, 애플리케이션은 유저의 입력에 관계없이 아이돌 상태가 되지 않습니다.
실제로 사용자의 아이돌 시간을 추적할 필요가 있는 경우 적절한 각도 접근법이 있는지 잘 모르겠습니다.Witoldz는 https://github.com/witoldsz/angular-http-auth을 통해 보다 나은 접근 방식을 제안합니다.이 방법에서는 credential을 필요로 하는 액션이 실행될 때 사용자에게 재인증을 요구합니다.사용자가 인증하면 이전에 실패한 요청이 재처리되고 아무 일도 없었던 것처럼 애플리케이션이 계속됩니다.
그러면 사용자의 인증이 만료되어도 애플리케이션 상태를 유지할 수 있고 작업이 손실되지 않기 때문에 사용자의 세션이 활성 상태일 때 만료될 수 있습니다.
클라이언트에 일종의 세션(쿠키, 토큰 등)이 있는 경우 해당 세션도 감시하고 만료되면 로그아웃 프로세스를 트리거할 수 있습니다.
app.run(['$interval', function($interval) {
$interval(function() {
if (/* session still exists */) {
} else {
// log out of client
}
}, 1000);
}]);
업데이트: 이 문제를 보여주는 플랭크입니다.http://plnkr.co/edit/ELotD8W8VAeQfbYFin1W 를 참조해 주세요.이 데몬은 디지스터 실행 시간이 간격이 틱할 때만 업데이트된다는 것을 나타냅니다.간격이 최대 수에 도달하면 디지스터는 더 이상 실행되지 않습니다.
ng-Idle이 좋은 방법인 것 같습니다만, Brian F의 수정 사항을 알 수 없었기 때문에 sleep session에도 타임 아웃을 하고 싶다고 생각하고 있었습니다.또, 매우 간단한 사용 사례도 염두에 두고 있었습니다.나는 그것을 아래 코드로 줄였다.이벤트를 후크하여 타임아웃플래그를 리셋합니다($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
}
}
});
나는 Buu의 소화 사이클 시계가 천재라고 생각한다.공유해주셔서 감사합니다.다른 사람들이 지적했듯이 $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();
});
});
ng-idle을 사용하여 약간의 로그아웃과 토큰 늘코드를 추가했는데 정상적으로 동작하고 있으니 시험해 보세요.@HackedByChinese에서 좋은 모듈을 만들어 주셔서 감사합니다.
Idle Timeout에서 세션 데이터와 토큰을 방금 삭제했습니다.
여기 제 코드가 있습니다.
$scope.$on('IdleTimeout', function () {
closeModals();
delete $window.sessionStorage.token;
$state.go("login");
$scope.timedout = $uibModal.open({
templateUrl: 'timedout-dialog.html',
windowClass: 'modal-danger'
});
});
더 큰 프로젝트에서 이 문제를 사용하고 있는 사람에게 답변을 확대해 보겠습니다.여러 이벤트 핸들러를 잘못 접속하면 프로그램이 이상하게 동작할 수 있습니다.
그것을 없애기 위해 공장에서 노출되는 싱글톤 함수를 사용했는데, 거기서 당신이 전화할 겁니다.inactivityTimeoutFactory.switchTimeoutOn()그리고.inactivityTimeoutFactory.switchTimeoutOff()를 눌러 비활성 기능으로 인해 로그아웃을 활성화 및 비활성화합니다.
이렇게 하면 타임아웃 절차를 활성화하려고 몇 번을 시도해도 이벤트핸들러의 인스턴스가 1개만 실행되도록 할 수 있기 때문에 사용자가 다른 루트에서 로그인 할 수 있는 어플리케이션에서 사용하기 쉬워집니다.
코드는 다음과 같습니다.
'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();
}
};
}
[어플리케이션 참조 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
});
});
언급URL : https://stackoverflow.com/questions/19168330/auto-logout-with-angularjs-based-on-idle-user
'source' 카테고리의 다른 글
| SpringBoot 오류: 드라이버 ClassName=driver.jdbc.driver에 등록된 드라이버입니다.OracleDriver를 찾을 수 없습니다. 직접 인스턴스화를 시도합니다. (0) | 2023.03.11 |
|---|---|
| 지정 시 패키지에 "프록시"가 있습니다.json은 문자열이어야 합니다. (0) | 2023.03.11 |
| Localhost에서 사이트 URL 및 WordPress URL 변경 (0) | 2023.03.11 |
| MongoDB 컬렉션의 모든 문서에 새 필드 추가 (0) | 2023.03.11 |
| 대체, 아이콘 및 매니페스트 링크를 wp_head에 큐잉하려면 어떻게 해야 합니까? (0) | 2023.03.11 |