задний план:

После входа пользователя А в том же браузере. В этот момент открывается новая вкладка, и пользователь B входит в систему. В настоящее время возникает такая проблема, поскольку информация для входа пользователя A была обновлена ​​пользователем B, что привело к получению неверных данных.

Решение, которое мы дали, таково: после входа в систему пользователя B при переключении обратно на вкладку браузера пользователя A мы предупредим, что новый пользователь вошел в систему, а затем снова обновим страницу.
​

Код

Предоставьте команде проекта метод npm. После входа в систему для получения информации о пользователе вызовите метод. Конечно, эта предпосылка заключается в том, что информация о пользователе зависит от локального кэша localStorage.

export default (storageKeyString: string, seconds: number = 2, tipsCallFunction?: () =>{}) => {
  if (typeof seconds !== 'number' ) throw new Error('seconds should be number');
  
  let cacheValue = getStorageVale(storageKeyString);

  if (document.hidden !== undefined) {
    document.addEventListener('visibilitychange', () => {
      if (!document.hidden) {
        let currentValue = getStorageVale(storageKeyString);
        if (currentValue !== cacheValue) {
          if (tipsCallFunction && typeof tipsCallFunction === 'function') {
            tipsCallFunction();
          } else {
            window.alert('检测新用户登录，当前页面会在2s之后刷新!');
          }
  
          setTimeout(() => {
            window.location.reload();
          }, seconds * 1000)
        }
      }
    })
  }
}

function getStorageVale (storageKeyString: string) {
  var [localstorage, ...restKeyArrays] = storageKeyString.split('.');
  let localStorageInfo = window.localStorage.getItem(localstorage)

  if (!restKeyArrays.length) return localStorageInfo;

  let returnVal = JSON.parse(localStorageInfo || '{}');

  for(let i = 0; i < restKeyArrays.length; i++ ) {
    returnVal = returnVal[restKeyArrays[i]]

    if (!returnVal) return '';

    if (typeof returnVal === 'string') {
      return returnVal
    }
  }

  return ""
}

​

Инструкции:

Установка

npm install --save @bit-sun/business-component@1.1.0

​

демонстрация кода

import React, { useRef } from 'react';
import { message } from 'antd';
import { CheckOneUser } from '@bit-sun/business-component';

CheckOneUser('userInfo.a.information.name', 3, () => {
  message.warning('检测新用户登录，当前页面会在3s之后刷新!');
})


export default () => {
  return (
    <div>
    </div>
  );
};

Описание недвижимости

CheckOneUser(
  storageKeyString: string, 
  seconds: number = 2, 
  tipsCallFunction?: () =>{}
)

Имя свойства	Типы	По умолчанию
storageKeyString	string: 'userInfo.a.information.name'	без
seconds	number	2
tipsCallFunction	function	() => { window.alert('Обнаружение входа нового пользователя, текущая страница будет обновлена ​​через 2 секунды!') }

Описание storageKeyString

'userInfo.a.information.name': пользователь - это имя элемента, другие - доступ к атрибуту

демо

отображение эффекта демонстрационного кода

​

Отображение значения по умолчанию