如何在租户切换时动态控制localStorage中user.employee的状态

核心思路是在前端备份原始的employee数据，这样切换租户时可以随时恢复，无需调用后端。具体实现步骤如下：

1. 备份原始employee数据 #

在首次获取并存储用户数据到localStorage时，同时把原始的employee单独备份到另一个localStorage键中（比如LOCAL_STORAGE_NAMES.originalEmployee）。如果是已有的项目，可以在应用启动的初始化逻辑里补做一次备份：

// 应用启动时执行
const initOriginalEmployeeBackup = () => {
  const localUser = getItemFromLocalStorage(LOCAL_STORAGE_NAMES.user);
  const hasBackup = getItemFromLocalStorage(LOCAL_STORAGE_NAMES.originalEmployee);
  if (localUser?.employee && !hasBackup) {
    // 仅在无备份且存在employee时存储原始数据（多层嵌套对象建议用深拷贝）
    setInLocalStorageAsync(LOCAL_STORAGE_NAMES.originalEmployee, JSON.parse(JSON.stringify(localUser.employee)));
  }
};

2. 修改租户切换逻辑 #

更新handleChange函数，根据租户是否一致，分别执行清空或恢复操作：

const handleChange = () => (event) => {
  const localUser = getItemFromLocalStorage(LOCAL_STORAGE_NAMES.user);
  const originalEmployee = getItemFromLocalStorage(LOCAL_STORAGE_NAMES.originalEmployee);
  
  if (!isMainTenantEqualToCurrentTenant(localUser)) {
    // 租户不一致：清空employee
    localUser.employee = null;
  } else {
    // 租户一致：恢复原始employee
    localUser.employee = originalEmployee || localUser.employee;
  }
  
  setInLocalStorageAsync(LOCAL_STORAGE_NAMES.user, localUser);
  // 后续其他业务逻辑...
};

3. 页面加载时的自动恢复 #

为避免页面刷新后，租户一致但employee仍为null的情况，在应用初始化时增加自动恢复逻辑：

// 应用启动时执行
const restoreEmployeeIfNeeded = () => {
  const localUser = getItemFromLocalStorage(LOCAL_STORAGE_NAMES.user);
  const originalEmployee = getItemFromLocalStorage(LOCAL_STORAGE_NAMES.originalEmployee);
  
  if (isMainTenantEqualToCurrentTenant(localUser) && !localUser.employee && originalEmployee) {
    localUser.employee = originalEmployee;
    setInLocalStorageAsync(LOCAL_STORAGE_NAMES.user, localUser);
  }
};

// 调用初始化函数
initOriginalEmployeeBackup();
restoreEmployeeIfNeeded();

注意事项 #

• 如果employee是多层嵌套对象，备份时必须用深拷贝（比如JSON.parse(JSON.stringify())），避免后续修改用户数据时污染备份的原始数据。
• 若后端更新了用户的employee数据，需同步更新localStorage中的备份，否则恢复的是旧数据。

内容的提问来源于stack exchange，提问作者Lautaro Graciani