React多账号登录场景下如何实现标签页账号追踪及新标签页信息传递

核心思路是用分层存储隔离全局登录态和单标签页活跃状态：

• 所有已登录账号的凭证（access token、refresh token、用户基础信息）统一存在localStorage或者IndexedDB这类全局持久化存储中，用唯一账号ID（如用户UID、邮箱哈希值）作为key，所有标签页共享这部分数据，避免重复登录。
• 单个标签页的当前活跃账号ID存在sessionStorage中：sessionStorage天然是标签页隔离的，页面刷新不会丢失，标签页关闭后自动清除，完全适配单标签页独立账号的需求。
• 若需要实现跨标签页的账号状态同步（比如某标签页登出了账号A，其他使用账号A的标签页需要同步登出），可以监听浏览器storage事件，当localStorage中对应账号的凭证被删除/修改时，校验当前标签页活跃账号是否匹配，触发对应状态更新即可。

不要使用cookie存储活跃账号ID，cookie会在所有标签页之间共享，无法实现单标签页独立账号的效果。

示例初始化代码：

// 获取当前标签页活跃账号信息
const getCurrentActiveAccount = () => {
  // 优先读取当前标签页独有的sessionStorage
  let activeId = sessionStorage.getItem('active_account_id');
  // 无活跃ID时读取全局已登录账号列表，取首个或跳转账号选择页
  if (!activeId) {
    const allLoggedAccounts = JSON.parse(localStorage.getItem('logged_accounts') || '[]');
    if (allLoggedAccounts.length) {
      activeId = allLoggedAccounts[0].id;
      sessionStorage.setItem('active_account_id', activeId);
    } else {
      // 无已登录账号，跳转登录页逻辑
      return null;
    }
  }
  // 从全局存储中拉取对应账号的完整凭证
  return JSON.parse(localStorage.getItem(`account_${activeId}`) || 'null');
};

最稳定的方案是统一给所有内部跳转链接追加当前活跃账号的标识参数，类似谷歌多账号体系的authuser参数：

• 封装项目内统一的跳转组件/方法，自动在跳转路径后追加?active_account_id=当前活跃账号ID的参数，不管是左键点击跳转还是右键选择「在新标签页打开」，参数都会被自动带到新标签页的URL中。
• 新标签页应用初始化时，优先读取URL上的active_account_id参数，校验该账号为已登录状态后，将ID写入当前标签页的sessionStorage，之后可以选择移除URL上的参数（避免地址栏冗余，用户分享链接时不带个人账号参数），后续就用该账号作为当前标签页的活跃账号。

React Router场景下的封装示例：

// 封装多账号适配的Link组件，自动注入活跃账号参数
import { Link } from 'react-router-dom';
import { useContext } from 'react';
import { AccountContext } from '@/contexts/AccountContext';

const MultiAccountLink = ({ to, ...rest }) => {
  const { activeAccountId } = useContext(AccountContext);
  // 兼容字符串和对象格式的to参数
  const processedTo = typeof to === 'string' 
    ? `${to}${to.includes('?') ? '&' : '?'}active_account_id=${activeAccountId}`
    : {
        ...to,
        search: to.search 
          ? `${to.search}&active_account_id=${activeAccountId}`
          : `?active_account_id=${activeAccountId}`
      };
  return <Link to={processedTo} {...rest} />;
};

export default MultiAccountLink;

新标签页初始化逻辑示例：

import { useSearchParams } from 'react-router-dom';

const useInitActiveAccount = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const urlAccountId = searchParams.get('active_account_id');

  useEffect(() => {
    if (urlAccountId) {
      const allLoggedAccounts = JSON.parse(localStorage.getItem('logged_accounts') || '[]');
      // 校验URL携带的账号是否为已登录账号
      const isValid = allLoggedAccounts.some(acc => acc.id === urlAccountId);
      if (isValid) {
        sessionStorage.setItem('active_account_id', urlAccountId);
        // 移除URL上的账号参数，避免冗余
        searchParams.delete('active_account_id');
        setSearchParams(searchParams, { replace: true });
      }
    }
    // 后续执行通用的活跃账号获取逻辑
  }, [urlAccountId, searchParams, setSearchParams]);
};

如果用户手动输入地址打开新标签页没有携带账号参数，可以默认读取最近登录的账号，或者弹出账号选择器让用户自主选择即可。

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