如何关闭登录新标签页后返回原标签页并强制触发渲染？

核心思路是利用**窗口间消息通信（window.postMessage）**实现新标签页与原标签页的联动，具体实现步骤如下：

1. 原标签页处理：打开登录窗口并监听消息 #

在触发登录的组件中，保存新窗口引用并添加消息监听，收到登录完成的信号后更新用户状态或刷新页面：

import { useAuth0 } from '@auth0/auth0-react';
import { useHistory } from 'react-router-dom';

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();
  const history = useHistory();

  const handleLogin = () => {
    // 打开Auth0登录新标签页，保存窗口引用
    const authWindow = window.open('', '_blank', 'width=600,height=800');
    // 调用Auth0登录，指定跳转回当前域名的回调页
    loginWithRedirect({
      redirectUri: `${window.location.origin}/auth-callback`,
      // 传递原页面路由，用于后续回跳
      appState: { returnTo: history.location.pathname }
    });

    // 监听来自登录窗口的消息
    const messageListener = (event) => {
      // 验证消息来源，避免跨域风险
      if (event.origin !== window.location.origin) return;
      if (event.data.type === 'AUTH_SUCCESS') {
        // 方案1：不刷新页面，更新Auth0用户状态
        const { getUser } = useAuth0();
        getUser();
        
        // 方案2：强制刷新路由/页面（按需选择）
        // history.go(0);
        // window.location.reload();

        // 移除监听，清理内存
        window.removeEventListener('message', messageListener);
      }
    };
    window.addEventListener('message', messageListener);
  };

  return <button onClick={handleLogin}>登录</button>;
};

export default LoginButton;

2. 登录回调页处理：发送完成信号并关闭窗口 #

在Auth0跳转回来的回调页面（比如/auth-callback）中，向原窗口发送登录完成的消息，然后关闭自身：

import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { useHistory } from 'react-router-dom';

const AuthCallback = () => {
  const { handleRedirectCallback } = useAuth0();
  const history = useHistory();

  useEffect(() => {
    const processAuth = async () => {
      // 处理Auth0的跳转回调
      const appState = await handleRedirectCallback();
      
      // 向原窗口发送登录完成消息
      if (window.opener && !window.opener.closed) {
        window.opener.postMessage({ type: 'AUTH_SUCCESS' }, window.location.origin);
        // 关闭当前登录窗口
        window.close();
      } else {
        // 降级处理：如果原窗口已关闭，跳转到目标页面
        history.push(appState?.returnTo || '/');
      }
    };

    processAuth();
  }, [handleRedirectCallback, history]);

  return <div>登录中...</div>;
};

export default AuthCallback;

3. 关键注意事项 #

• 必须验证event.origin，确保消息来自自身域名，防范XSS攻击
• 优先使用Auth0的getUser()更新状态，避免全页面刷新带来的体验损耗
• 处理原窗口被用户手动关闭的情况，做降级跳转

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