如何从 child window 派发操作？

Question

我已经实现了自定义 SSO 服务，它工作正常，但我想打开一个弹出窗口来请求用户授权，而不是将他重定向到此页面。

问题是，当用户接受或拒绝连接他的帐户时，我需要刷新我的 parent window（网络应用程序）并关闭弹出窗口（授权）。

所以我正在考虑从我的弹出窗口调度一个动作到我的 parent window 来刷新它的状态，比如：

componentWillMount() {
  window.opener.loginSuccess(this.props.user);
}

但是我没有看到 window object 有任何动作。我们如何实现此功能？

Answer 1

在我的项目中，我将 popup/modal 等管理到触发的父组件中，将参数等传递给弹出窗口。弹出页面只负责展示。所有行为（来自服务层的服务调用、redux 绑定）都进入我的父组件。

我将行为（函数）和道具传递给弹出窗口，这样当我需要改变某事时。我只是更新 redux 状态。当使用像 redux 这样的面向数据的架构时，管理组件很容易。

我的建议是，如果没有必要，请不要使用虚拟表示组件，例如具有自己的方法、自己的行为的行为组件。

Answer 2

您可以在父子 windows 之间使用 messaging API。查看 link 中的示例，注意您需要为要接收的消息实现事件侦听器。因此可以相应地调度操作。

Answer 3

您可以向 opener window 添加对 loginSuccess 方法的引用，该方法将调度所需的所需操作：

const store = redux.createStore(reducer);
window.loginSuccess = function(user) {
    store.dispatch(sampleActionCreator(user));
};

现在您可以从 child.

访问 window.opener.loginSuccess()

How to dispatch action from a child window?