React项目多标签页登录异常：custom-referrer引发空白页问题咨询

这个方案完全可行。localStorage是同域名下浏览器级别的共享存储，但只要给每个工厂的custom-referrer设置独立的存储键，就能避免不同标签页的referrer互相覆盖，彻底解决第二个标签页空白的问题。

1. 按工厂标识生成唯一存储键 #

每个工厂的登录页必然有唯一标识（比如URL查询参数里的millId、路由中的工厂编码等），用这个标识拼接localStorage的键名，例如custom-referrer-${millId}，确保不同工厂的referrer存储在独立的键下，不会互相干扰。

2. 登录页初始化时读取对应工厂的referrer #

在登录组件初始化阶段，先从URL中解析出工厂标识，再读取对应localStorage键的值；如果是首次打开该工厂的登录页，就把当前页面URL（或业务需要的初始referrer值）存入localStorage。

3. 登录完成后仅更新当前工厂的referrer #

登录成功后，只修改当前工厂对应的localStorage键值，不会影响其他工厂的存储内容。

4. 跳转时使用对应工厂的referrer #

当需要跳转到目标页面时，读取当前工厂对应的localStorage值，而非全局的custom-referrer变量。

import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

// 模拟登录API
const loginApi = async (formData) => {
  // 实际项目中替换为真实登录接口请求
  return new Promise(resolve => setTimeout(resolve, 1000));
};

const LoginPage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [millId, setMillId] = useState('');

  // 解析URL中的工厂标识并初始化localStorage
  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    const id = searchParams.get('millId');
    if (id) {
      setMillId(id);
      const storageKey = `custom-referrer-${id}`;
      // 首次打开该工厂登录页时，存入当前URL作为初始referrer
      if (!localStorage.getItem(storageKey)) {
        localStorage.setItem(storageKey, window.location.href);
      }
    }
  }, [location]);

  // 登录处理逻辑
  const handleLogin = async (formData) => {
    try {
      await loginApi(formData);
      const storageKey = `custom-referrer-${millId}`;
      // 登录成功后，更新当前工厂的referrer为目标页面URL
      const targetUrl = `/dashboard?millId=${millId}`;
      localStorage.setItem(storageKey, targetUrl);
      // 跳转到目标页面
      navigate(targetUrl);
    } catch (error) {
      console.error('登录失败', error);
    }
  };

  return (
    <div className="login-container">
      <h2>工厂 {millId} 登录</h2>
      <form onSubmit={(e) => {
        e.preventDefault();
        handleLogin({
          username: e.target.username.value,
          password: e.target.password.value
        });
      }}>
        <input type="text" name="username" placeholder="用户名" required />
        <input type="password" name="password" placeholder="密码" required />
        <button type="submit">登录</button>
      </form>
    </div>
  );
};

export default LoginPage;

• 清理冗余数据：可以在应用初始化时，遍历所有custom-referrer-*开头的存储键，删除超过30天的过期数据，避免localStorage占用过多空间。
• 同工厂多标签页同步：如果需要同工厂的多个标签页同步referrer状态，可以监听storage事件，当对应键值变化时自动更新组件状态：

useEffect(() => {
  const handleStorageUpdate = (e) => {
    if (e.key === `custom-referrer-${millId}`) {
      // 此处可根据业务需求更新组件状态或执行跳转逻辑
      console.log(`工厂${millId}的referrer已更新：`, e.newValue);
    }
  };
  window.addEventListener('storage', handleStorageUpdate);
  return () => window.removeEventListener('storage', handleStorageUpdate);
}, [millId]);

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