Written in front:
If the value of localStorage you use does not want to be modified, it is best to use a static value, that is, it will not be changed by your code after it is placed in localStorage. If you place a variable in localStorage to identify the login status, for example: connected == 1 means logged in, connected == 0 means not logged in, then this means that your code will definitely modify the connected value , then at this time, this method is not applicable to the connected variable, because after using it, this variable will keep flashing, and there will be inexplicable problems.
The project I wrote uses localStorage to determine whether the current user is logged in. I don’t use tokens. I think this method can also be implemented. I thought of using this method. If the user does not disconnect the login, even if a new tab is opened The page can also maintain the previous login status, avoiding multiple logins by the user and affecting the user experience.
As in the title, the way I want to introduce is to prevent users from manually modifying localStorage and sessionStorage (both of which are referred to as local and session below) from the developer tools of the browser (chrome is to view localStorage and sessionStorage in the application).
If you are using vue, add these lines of code to main.js to solve your problem, simple and rude!
The code looks like this:
Explanation: This code is for all variables in local and session. You can also specify which variable you want not to be changed. For example, if you have a variable called language, then you can:
if(e.key == 'language'){ localStorage.setItem(e.key,e.oldValue) }
// 防止localStorage被修改
window.addEventListener('storage', function(e) {
localStorage.setItem(e.key, e.oldValue)
});
// 防止sessionStorage被修改
window.addEventListener('storage', function(e) {
this.sessionStorage.setItem(e.key, e.oldValue)
});Specifically, the overall position in main.js , be careful not to misplace it:
The principle is: you change the new value, right? Yes, the labor and capital will cover you with the old value! mad at you! Eh~ I can’t change it~~~
Since I also use: window.sessionStorage.setItem or window.localStorage.setItem to modify local and session in the code, I originally thought that the above method would affect the operation of modifying the value in the code, but in fact it does not Does not affect, so I can conclude: this way is to prevent users from modifying local and session here:
The achieved effect is shown in the following gif:
If you like it, give it a thumbs up! I also refer to other people's methods, stepping on the shoulders of giants hahaha
Update on November 22:
This method also affects the modification of local and session values in the code. That is to say, if you need to change the values of local and session in your code, see what is given at the beginning of the article. It is best to apply it to one that will not be modified. static value.