Make writing a habit together! This is the third day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details

Hello, I’m XY 👨🏻💻. Today to share a bug🐞. In the same browser to open two pages of the same origin of the data string change problem, many large sites are in the move 💡

background

One afternoon, so-and-so god (the customer is our god) is using the products of our company, in the browser to open A TAB account logged in A, then to login TAB B B account, or log on to the two accounts at the same time, and then to A down operation data (not refresh the page), the result is that in A modify to the B data, And the permissions of the two accounts are different 💥

Why was it changed

As for why the data of B was modified:

Front end user information and the token is stored in the browser, such as local, as a result, open a new TAB to login other accounts, because is the same page, a new TAB of the user information and token will overwrite the previous TAB of the user information and token, in the case of page does not refresh, operating a account data, It’s actually the data under operation B

Many students’ first reaction to this question is:

This is not very normal operation or let the user refresh the page is not good, including I also think so 🤣

At the same time, I also looked at some products on the market, there are similar problems, take us more familiar with the code cloud, I specially registered two accounts

  1. The registered new account logs in on the first TAB

Because it’s a brand new account, there’s no information or anything

  1. Open a new TAB, log out first, and then log in to the account I’ve been using

I have been using account notifications and private messages or a lot of content

  1. Go back to the first TAB

The account is clearly a new account, but it showed the data of the old account

At that time the heart secretly pleased, code cloud so big platform did not do processing, we should also be indifferent ✌️

But I am a worker, do not do is not the leadership to decide? Since the leader has raised this demand, and strongly request to optimize user experience, can only think of a way to solve 😩

Demand plan

Plan 1:

  • Same browser supportLog in to both accounts simultaneouslyEach other

Scheme 2:

  • Open two homologous pages in the same browserPrevious TAB pagePrompt user forceThe refreshOr directlyredirectGo to the company website

Return to the essence of the problem

The essence of this problem is that the user information and token on the new TAB page will overwrite the user information and token on the previous TAB page because it is the same origin page

Since the essence of the problem is the local storage replacement problem, then try to solve it 🙍♂️

How to log in to two accounts at the same time

To ensure that the two accounts do not interfere with each other when logging in at the same time, you only need to ensure that the local storage does not interfere with each other, so that different users can store different token keys

Implementation method: Store the token in userName+token as the key during login

import Cookies from 'js-cookie'

export function setToken( token, userName ) {
  return Cookies.set( userName + 'token', token, { expires: xxxx } )
}
Copy the code

However, consider that userName (userName) may be overwritten, so store the userName in sessionStorage before refreshing the page

window.addEventListener("beforeunload".() = > {
  sessionStorage.setItem("userName".this.userName || "");
});
Copy the code

Why put it in sessionStorage?

💡 Because the sessionStorage life cycle is the current window or TAB page, that is, the sessionStorage in each TAB page does not affect each other, even if it is the same page

Obtain the token based on userName+token

export function getToken() {
  return Cookies.get( sessionStorage.getItem( 'userName' ) + 'token')}Copy the code

Ok, so this is basically the perfect solution to the problem of trying to log in to multiple user accounts from the same browser

The previous label forces a refresh or redirection

Again, the problem is local storage. Open the second source page TAB, is there a way to tell the first TAB??

Of course, there is a way to use HTML5 storage event listener:

💡HTML5 storage event listener: When a page of the same origin page modifies localStorage, the rest of the same origin page as long as the registered storage event, will trigger

The Web Storage API has a set of event notification mechanism built in. When the content of the Storage area changes (including adding, modifying, deleting data), it will automatically trigger the Storage event and send it to all interested listeners. Therefore, if you need to track storage area changes, you need to listen for storage events on pages that care about storage area contents.

 window.addEventListener("storage".(e) = >{
   // Perform a series of judgments after obtaining e
 }, false);
Copy the code

In fact, there is a lot of information attached to event E that allows for precise control of the event 👇.

field meaning
key The storageKey has changed
newValue The new value
oldValue Original value before transformation
storageArea Associated change objects
url The URL that triggers the change, if it’s inside the frameset, is the URL that triggers the frame

With this content, you can do what you need to do based on your business requirements.

However, there is a problem here, only if a page of the same page has modified localStorage, that is, not modified, or listen to.

If you copy the link from the first TAB directly to the second TAB, the local storage will not change, and the listening event for the first TAB will not fire

In this case, you can write a unique identifier in localStorage each time the page is initialized. It is recommended that you write a timestamp in localStorage, so that even if the address is copied to the second TAB, the initialization operation will be performed, and the timestamp change will trigger the listening storage event.

All right, that’s it

💡 finally want to @code cloud and many sites with such problems have put forward this optimization point, 2022, let us become better 🤞.

Write in the last

Hello everyone, I am a front-end 🤫 hobby: messing around

If you are also a blind front end welcome to add my wechat exchange oh…

🤫 be sure to ask me