Question

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

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

所以我在考虑从弹出窗口向我的父窗口调度一个动作来刷新它的状态，例如：

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

但是我没有看到窗口对象的任何动作。我们怎么能实现这个功能呢？

Answer 1

您可以在开启窗口中添加对loginSuccess方法的引用，该方法将分派所需的操作：

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

现在您可以从孩子那里访问window.opener.loginSuccess()。

Answer 2

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

我将行为（funcs）和道具传递给弹出窗口，这样当我需要改变时......我只是更新redux状态。在使用像redux这样的面向数据的架构时，可以轻松管理组件。

我给你的建议，如果你不需要，不要使用虚假的演示组件，比如有自己的方法，自己的行为的行为组件。

Answer 3

您可以在父窗口和子窗口之间使用messaging API。查看链接中的示例，并注意到您需要为要接收的消息实现事件侦听器。所以可以相应地发送行动。