React项目中使用iframe嵌套客户提供的Vue登录页获取token值登录

需求： 最近新接的一个项目中，客户需要在项目中使用iframe嵌套一个Vue登录页，登录后获取token值，再调用项目中的登录接口传入token值进行本项目的登录。

解决方法：

// 嵌入的页面地址
const url = 'xxxxxx'
    // 定义onload方法
    const iframeChange = (val: any) => {
        send_message()
    }
    // 获取iframe节点，使用postMessage发送嵌套页面数据
    function send_message() {
        let iframe: any = document.getElementById('iframe')
        iframe.contentWindow.postMessage(
            {
                method: 'get',
                origin: location.origin
            },
            url
        )
    }
    // 监听message事件接收数据并登录
    window.onmessage = (e: any) => {
        if (e.data.token) {
            let token = JSON.parse(e.data.token)
            loginHz.run({
                accessToken: token.tokenVo.access_token,
                refreshToken: token.tokenVo.refresh_token
            })
        }
    }
    
    return (
        <iframe
            id='iframe'
            width='100%'
            height='600px'
            frameBorder='0'
            src={url}
            sandbox='allow-scripts allow-forms allow-same-origin'
            onLoad={iframeChange}
        />
    )
   

该方法在监听message时间内接收到数据并登录，登录时会有一定的时延，如果有好一点的解决的方法可以留言在评论区。 完结，为社会主义事业奋斗终生！！！