Question

我目前正在尝试弄清楚如何使用React打开一个新的子窗口，执行身份验证，然后回写到完成身份验证的父页面。

我有一个标有“Add New”的按钮，当你点击它时会打开一个弹出窗口，页面上有一个按钮。单击该按钮时，将打开一个新窗口，以便客户可以在其帐户中接受OAuth请求，然后在成功进行身份验证后，窗口将重新路由到回调URL。但是，我希望能够阻止客户看到它重新路由，而是在成功完成auth时关闭窗口，以及父页面上写入信息，我可以看到auth已完成，触发下一个功能。关于如何做到这一点的任何想法？

我尝试浏览不同的Window函数，看看是否有任何东西返回子窗口的当前URL，这样我就可以做一个if语句，说明当URL =回调URL时，关闭窗口，写到页面，但我没有运气。看起来一旦新窗口打开，父窗口就没有关于该窗口保留的信息。关于如何将关于新子窗口的信息写入父窗口的任何想法将不胜感激。

如果有帮助，我会粘贴下面的一些功能。

下面是AuthButton组件，它在App组件中调用。 AuthButton组件打开弹出窗口，其中包括将打开身份验证窗口的按钮。

<AuthButton
      activatePopup={this.activatePopup.bind(this)}
      auth={this.auth.bind(this)}
      showPopup={this.state.showPopup}
      closePopup={this.activateAuthPopup.bind(this)}
/>

这是打开新子窗口的按钮组件：

class Button extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    render() {
        return (
            <div>
                <button 
                style={{
                    backgroundColor: "fff", 
                    backgroundImage: `url(${logo})`, 
                    backgroundSize: '70%', 
                    color: "#000", 
                    width: "18em", 
                    height: "10em", 
                    backgroundRepeat: "no-repeat", 
                    backgroundPosition: "center", 
                    margin: "10px",
                    borderStyle: "solid",
                    borderColor: "#000",
                    borderWidth: "2px",
                    borderRadius: "5px"
                }} 
                onClick = {
                    this.props.auth
                }></button>
          </div>
        );
    }
}

在App组件的App.js文件中，有一个auth函数（如下所示）。 Axios正在应用程序中点击一条路线，它返回auth URL，然后我们获取该URL并执行window.open，这将打开一个新窗口，供客户进行身份验证。

  auth = () => {
      axios('/auth/oauth/authorize', {
        headers: {
          "Access-Control-Allow-Origin": true,
          'maxRedirects': 0
        }
      })
      .then(response => {
        console.log("Response", response);
        console.log("URL", response.data.href);
        var strWindowFeatures = "width=1000,height=800,resizable,scrollbars=yes,status=1";
        var windowpop = window.open(response.data.href, null, strWindowFeatures)
        console.log("Window Location Href", windowpop.location.href);
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });
  }

窗口位置Href返回'about：blank'。

如果我能提供任何其他信息，请告诉我！谢谢！

Answer 1

因此，为了解决这个问题，我们正在关闭auth成功时路由函数中的窗口，而在React函数中，我正在运行一个查找window.closed是true还是false的计时器，如果是是的，我们正在改变某些国家。

auth = () => {
      axios('/auth/oauth/authorize', {
        headers: {
          "Access-Control-Allow-Origin": true,
          'maxRedirects': 0
        }
      })
      .then(response => {
        var strWindowFeatures = "width=1000,height=800,resizable,scrollbars=yes,status=1";
        var windowpop = window.open(response.data.href, null, strWindowFeatures)
        this.setState({
          authUrl: response.data.href
        })
        windowpop.focus()
        var newThis = this; 
        var timer = setInterval(function() {   
            if(windowpop.closed) {  
                clearInterval(timer);
                newThis.setState({
                  logo: logo,
                  opacity: 0.5,
                  success: true
                });
                console.log('closed');  
            }  
        }, 1000); 
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });
  }

如何在父窗口中访问有关子窗口的信息？

1 个答案: