2017-12-16 5 views
2

클라이언트 측에서 웹 응용 프로그램 제한 시간을 제어하려고합니다. JavaScript를 사용하여 사용자가 유휴 상태인지 아니면 활성 상태인지 감지 할 수 있습니다. 따라서 사용자가 일정 기간 동안 아무런 조치도 취하지 않으면 내 JavaScript setTimeout(callback, millisecond)이 (가) 해고됩니다. 이 승인 이후에 나는 내 응용 프로그램을 자동으로 로그 아웃하도록 관리 할 수 ​​있습니다.여러 브라우저 탭에서 JavaScript 세션 관리

그러나 브라우저의 여러 탭이 동시에 내 같은 페이지를 볼 때, 로그 아웃 이벤트는 여러 브라우저 탭 사이에 동기화되지 않습니다. 나는 그것이 동기화되기를 원한다. 그에게 열려있는 탭 2 번 도착과 동일한 웹 페이지를 탐색 및 탭 2 번에서 매우 적극적으로 사용 시간이 초과되기 전에

예를 들어, 먼저 사용자는 탭 1 번을 사용하여 내 웹 페이지를로드합니다. 하지만 그 당시에는 no.1 탭이 활발하게 사용 중이 아니기 때문에 tab no.1이 (가) 시간 초과를 트리거했습니다. 나는 그렇게되고 싶지 않아. 사용자가 다른 탭에서 동일한 웹 페이지를 적극적으로 사용하고 있기 때문에이 탭을 활성화하고 싶습니다.

그래서 나는/유지 한 사용자가 활성화되어 다른 브라우저 탭에서 최대 세션 시간을 확인 htm5 localStorage을 사용했다.

<html> 
<head> 
    <script type="text/javascript"> 
     var timeout_time = 5; 
     var time_remaining = 0; 

     setInterval(function(){ 
      time_remaining = localStorage.getItem('timeout_time'); 
      console.log("time_remaining = ", time_remaining); 
      if(time_remaining > 1 || time_remaining != null){ 
       localStorage.setItem('timeout_time', time_remaining - 1000); 
      } 
     }, 1000); 

     function SetTimerForAppSession() { 
      onInactive(logout, timeout_time * 1000); 
     } 

     function logout() { 
      console.log('Logout'); 

      if(localStorage.getItem('timeout_time') <= 0) 
      { 
       window.location = "//plnkr.co/"; 
      } 
      else 
      { 
       console.log("Logout.SetTimerForAppSession"); 
       SetTimerForAppSession(); 
      } 
     } 

     function onInactive(callback, millisecond) { 
      var wait = setTimeout(callback, millisecond); 

      document.onmousemove = 
      document.onmousedown = 
      document.onmouseup = 
      document.onmousewheel = 
      document.DOMMouseScroll = 
      document.onkeydown = 
      document.onkeyup = 
      document.ontouchstart = 
      document.ontouchmove = 
      document.onscroll = 
      document.focus = function() { 

       // clear 
       clearTimeout(wait); 
       localStorage.removeItem('timeout_time'); 

       // reset 
       wait = setTimeout(callback, millisecond); 
       localStorage.setItem('timeout_time', millisecond) 
      }; 
     } 
    </script> 
</head> 
<body onload="SetTimerForAppSession();" > 
    .... keep active so that your session will never be expired. ..... 
</body> 

마지막으로 나는 다른 브라우저 탭을 통해 세션 시간을 관리 할 수 ​​있습니다. 하지만 나는 내 접근법이 setInterval 함수에 의존 할 필요가 있기 때문에 올바른 방법이라고 생각하지 않습니다. 나는 또한 응용 프로그램 성능에 대해 걱정하고 있습니다.

더 나은 해결책이 있다면 친절하게 알려주십시오.

Plunker

+0

* "저장 이벤트"*를 사용하여 다른 창에서의 마지막 활동을 추적 할 수도 있습니다 – charlietfl

답변

0

이 아이디어는 사용자가 활성화되면 응용 프로그램이 정기적으로 서버와 상호 작용합니다 가정합니다. 수동 로그 아웃 호출과 자동 로그 아웃 호출을 가질 수 있습니다. 서버가 수동 로그 아웃 요청을 볼 때, 그것은 순종한다. 요청이 자동 로그 아웃에 대한 것이면 해당 사용자가 활성 상태인지 확인하고 해당 요청을 따르는 지 여부를 결정합니다. 나는 모든 CPU 부하를 추가하는 잘 관리 된 하나의 타임 아웃에 대해 걱정할 필요가 없다.