js handles account logout when closing the browser
Classic approachAs we all know, for the sake of account security, when the user does not actively click to log out of the system, the method of directly closing the browser or tab to force log out of the system is:
//Call the logout interface when closing window.onbeforeunload = function() {
//Execute the logout ajax call, simple example $.ajax({url:"/logout"});
};
questionThis method has serious problems. It will cause logout to be called when refreshing the page. Many systems must support refreshing the page to maintain the session. How to deal with it? There is no solution, but it works:
//Call the logout interface when closing window.onbeforeunload = function() {
//Execute the logout ajax call, pass in the flag, and tell the backend to delay the logout$.ajax({url:"/logout"},data:{delay:true});
};
The background logout interface sets a timer according to the delay flag to delay logout. For example, if a 5-second timer is set, the application system session will be actually logged out after 5 seconds. At the same time, after the front-end page is loaded, a clear logout interface should be called immediately to tell the background to delete the delayed logout timer to ensure that the previous logout operation is abandoned when the page is refreshed to maintain the application session. Further questionsHow much delay is reliable for background timer? Of course, we hope that the shorter the better, because this ensures that after the user closes the browser and reopens the page, the session will not be restored. For example, a 5-second timer is set in the background. As long as the interval between the user closing the browser and reopening the page is greater than 5 seconds, the session will not be restored, ensuring that the user re-enters the login page. Of course, if the user's hand speed is too high and the page is reopened within 5 seconds, the previous session will be successfully entered. Of course, this will not cause serious problems, because a malicious user cannot use the computer that the user left and open the page very quickly. Then what? How many seconds of delay should be set? This depends on when the front-end code calls to clear the delayed logout timer when loading the page. The key point is that the sooner the better.
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<script type="text/javascript">
//In order to call and clear the delayed logout timer as soon as possible, use the original XMLHttpRequest method to call var xhr = new XMLHttpRequest();
if (xhr) {
xhr.open("POST", '/clearlogout', true);
xhr.send();
}
</script>
......
After the above processing, under normal network conditions, the refresh page operation can ensure that the time interval between calling the delayed logout and clearing the delayed logout is very short. Generally speaking, 5 seconds is a more reasonable delay value. Issues that need attention Obviously, the above mechanism must rely on the backend two-layer session mechanism, because the premise is that it must first support the refresh page session retention, so the surface layer is the session of the web framework itself, and the inner layer is the application layer session. Surface sessions rely on cookies, while inner application sessions rely on background cache mechanisms or databases This is the end of this article about how to log out of an account when closing the browser using js. For more information about how to log out of an account when closing the browser using js, please search for previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: CSS Naming: BEM, scoped CSS, CSS modules and CSS-in-JS explained
>>: MySQL multi-instance installation boot auto-start service configuration process
Recommend
Two ways to prohibit clearing the input text input cache in html
Most browsers will cache input values by defaul...
JavaScript to achieve floor effect
This article shares the specific code of JavaScri...
A brief talk about calculated properties and property listening in Vue
Table of contents 1. Computed properties Syntax: ...
Detailed explanation of the definition and usage of MySQL stored functions (custom functions)
Stored Functions What is a stored function: It en...
Detailed explanation of the underlying implementation of descending index, a new feature of MySQL 8
What is a descending index? You may be familiar w...
Node.js+express message board function implementation example
Table of contents Message Board Required librarie...
Detailed explanation of SRIOV pass-through configuration and performance testing based on KVM
SRIOV introduction, VF pass-through configuration...
Simply understand the differences in the principles of common SQL delete statements
This article mainly introduces the differences be...
MySQL 5.7.27 installation and configuration method graphic tutorial
The installation tutorial of MySQL 5.7.27 is reco...
Solve the problem of inconsistent front and back end ports of Vue
Vue front and back end ports are inconsistent In ...
Analysis of the pros and cons of fixed, fluid, and flexible web page layouts
There is a question that has troubled web designe...
How to use wangEditor in vue and how to get focus by echoing data
Rich text editors are often used when doing backg...
Mysql join table and id auto-increment example analysis
How to write join If you use left join, is the ta...
How to use Linux tr command
01. Command Overview The tr command can replace, ...
Implementation example of Vue+Element+Springboot image upload
Recently, I happened to be in touch with the vue+...