CODEWITHSUNDEEP
javascriptjqueryajaxbrowserlogout
Hasan K
Hasan K

Reputation: 600

Perform logout on browser close or tab close using jquery/Javascript

I have a requirement to logout the user on browser close or tab close. I have tried using the below code and it works fine except for the following: 1.) When I click on the browser refresh button, it still logs out 2.) When I change the URL in browser and hit enter it still logs out Both of the above are undesirable and i want to prevent. Can anyone suggest how? Here's my script:

var validNavigation = false;
 
function wireUpEvents() {

  window.onbeforeunload = function(e) {
	  if (!validNavigation) {
         endSession();
      }
  }
	
  //Hits the server and invalidates the session
	function endSession() {
		$.ajax({
		    url : "performLogout..",
		    type : "GET",
		    async: false,
		    success : function(response) {},
		    error: function(response) {}
		  });
		} 
  
 
  //On click of F5
  document.onkeydown = function disableKeys() {
	  if( typeof event != 'undefined' ) {
	    if(event.keyCode == 116) {
	      validNavigation = true;
	      event.keyCode = 0;
	      //return false; //return false if u want to disable refresh
	    }
	  }
	};
 
  // Attach the event click for all links in the page
  $("a").on("click", function() {
    validNavigation = true;
  });
 
  // Attach the event submit for all forms in the page
  $("form").on("submit", function() {
    validNavigation = true;
  });
 
  // Attach the event click for all inputs in the page
  $("input[type=submit]").on("click", function() {
    validNavigation = true;
  });
  
  $("select#select-id").on("change", function() {
	  validNavigation = true;
	});
 
}
 
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
  wireUpEvents();
});

Thanks

Upvotes: 3

Views: 4819

Answers (1)

Evan Kennedy
Evan Kennedy

Reputation: 4175

For number 2, there is no way to distinguish between a user closing a tab and a user typing a new URL to travel to. My question to you is, why would you not log them out if they type google.com into their address bar which has the same effect as them closing your tab and navigating? Have you thought about them logging in, opening a new tab on your site, then closing that tab. The original tab is still open but you want to log them out? Think of edge cases before assuming the intention of the user.

For your scenerio if there is a single tab per session, you may want to look into SessionStorage which holds information locally only until the browser window is closed. All new tabs will be new instances of sessions.

Perhaps a good approach would be to mark a session as paused whenever a user leaves the page no matter what condition then resume their session when a new page is loaded. In this environment, you'll need to implement simple garbage collection on the server to discard old sessions.

All in all, don't log out users unless you're 100% sure they're done. A little more effort on your end is almost always worth the better user experience. You'll lose valuable users the other way.

Upvotes: 1

Related Questions