AngularJS 를 이용하여 만든 웹 사이트에 일정시간 이후 자동으로 로그아웃 시키는 기능을 오래전부터 생각 해 왔었다.
오늘 Backend (API) 어플리케이션을 부분 리팩토링 한 후 퇴근까지 시간이 남아서 해당 기능에 대해서 조사해본 결과, setTimeout() 라는 자바스크립트에서 제공하는 타이머 함수가 있는 것을 알게되었다.
https://www.w3schools.com/jsref/met_win_settimeout.asp
이 함수를 이용해서 원하는 기능을 설정 해놓고 일정 시간 뒤에 실행할 수 있는걸 확인했다.
Window Object: clearTimeout() Method
Window Object: clearInterval() Method
위 함수들을 이용하면 타이머 취소도 가능하다.
여기서 갑자기 드는생각.
AngularJS 에 제공되는 기능도 있지 않을까?
찾아 보니 역시나! 있다.
https://docs.angularjs.org/api/ng/service/$timeout
사용방법은 JS 의 타이머 함수와 유사했다.
자, 그럼 기능을 구현해 볼까!!
기본적으로 로그아웃기능을 state('access.signout', ...) 으로 만들어져 있다.
요구사항은 이러하다
- 로그인 이후 페이지에서 타이머가 동작해야 한다.
- $state 가 변경될 때마다 타이머를 갱신한다.
- 특정시간동안 아무런 액션 없을 경우 로그아웃 시킨다.
/* * 특정시간이 지나면 자동으로 로그아웃 시켜주는 기능 */ $rootScope.initAutoLogout = function() { // 설정된 타이머가 있을 경우 타이머 취소 if ($rootScope.autoLogoutPromise) { $timeout.cancel($rootScope.autoLogoutPromise); } // 타이머 설정 $rootScope.autoLogoutPromise = $timeout (function () { $state.go('access.signout'); return null; }, (15 * 60 * 1000), true); // 15 min }
/* * $state 가 변경될때마다 호출되는 부분 */ $rootScope.$on('$stateChangeStart', function(event, current, previous) { // 로그인이 필요한 페이지의 경우 if (current.requiedLogin) { // 특정시간이 지나면 자동으로 로그아웃 기능 설정 $rootScope.initAutoLogout(); } }); |
뒷단에서 제공하는 token 의 유효시간을 20분으로 설정해놨기에 Web 에서는 그보다 조금 짧은 15분으로 세팅하고, 테스트 진행해본 결과 잘 동작한다.
위 코드에서 상황에 따라 양념을 더 쳐야 하겠지만 일단 위의 코드로 자동 로그아웃되는 기능이 추가되었다.
# 참고 사이트
1. [JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, setTimeout() {}
2. JS에서의 타이머와 중지 시키는 법
- http://thesoul214.blogspot.kr/2013/08/js.html
3. [AngujarJS] 쉽지만 쉽지않은 $timeout 서비스 - http://programmingsummaries.tistory.com/348
