If the token has not expired, the user can access the home page without logging in.

But Mr. Hu feels there is a security risk. Imagine a scenario where a teacher logs on to the grade management system and gives you a 35 for a high score. You can quickly open the system and reset it to a 99 after the teacher closes the browser and leaves.

Great ヾ (≧ del ≦ *) o

So how can brutal avoid “students change grades” this behavior?

knowledge

Browser shutdown triggers beforeUnload, unload page unload events.

After practice, it is found that the browser refresh also triggers beforeUnload and unload events, as well as the load page loading event.

practice

  • Solution a:

Clear tokens directly in beforeUnload.

Source:

 window.onbeforeunload = function () {
    localStorage.removeItem("token");
};
Copy the code

When I close the browser and open it again, I need to log in. At first, I thought I succeeded, but after refreshing the browser, I found that I also need to log in. Oh no, I failed. .

  • Scheme 2:

One time is created when the browser triggers onbeforeUnload and another time is created when the OnUnload event is triggered. The two times are subtracted, off if the interval is small, and refreshed otherwise.

Source:

let beginTime = 0; // Start time let differTime = 0; // Time difference const interval = 5; Onunload = function () {differTime = new Date().getTime() - beginTime; if (differTime <= interval) { localStorage.removeItem("token"); } else {console.log(" This is a refresh "); }}; window.onbeforeunload = function () { beginTime = new Date().getTime(); };Copy the code

After practice, I found that the refresh problem was also solved. I was overjoyed and submitted the code quickly. However,, after the project is released, there will occasionally be a need to redo the situation while performing a refresh on the computer browser of a colleague. (Feeling bad again)

The specific reason is that the interval set is different on different computers, which makes it impossible to accurately determine whether the current behavior is to refresh or close the TAB page. Therefore, this scheme also has problems.

  • Plan 3

When the browser triggers the OnUnload event, use localStorage to save the current time. When the browser triggers onLoad to read the saved time, create a new time. If the time interval is longer than 3s, the token is cleared. The difference between this and the second method is that this method greatly lengthens the interval for checking and shifts the token clearing operation from page unload to page load.

Source:

window.onload = function () { let lastTime = localStorage.getItem("lastTime"); const interval = 3 * 1000; // Clear token if (! lastTime || new Date().getTime() - lastTime > interval) { localStorage.removeItem("token"); Console. log(" Clear token")}else{console.log(" Too short to clear token")}}; window.onunload = function () { localStorage.setItem("lastTime", new Date().getTime()); };Copy the code

The ultimate solution

Replace localStorage with sessionStorage to store tokens, which perfectly realizes the effect of clearing tokens after closing the browser.

Because sessionStorage is not a persistent local storage, it is only session level storage. And localStorage is persistent localStorage, unless actively delete data, otherwise data is never expired.

Of course, sessionStorage is not used in all cases instead of localStorage.

If you want to be able to access the system for a period of time after the window closes, use localStorage to store the token.

If you need to enter the password after the window is closed, use sessionStorage.

Finally, thanks for the comments, Oli!!