微信网页登录逻辑与实现方法(2)

componentDidMount() { // ... ... window.addEventListener('message', this.msgReceive, false); } componentWillUnmount() { window.removeEventListener('message', this.msgReceive); } msgReceive(event) { // 监测是否是安全iframe if(!event.isTrusted) { return; } console.log(event.data); // 获取iframe中传来的数据, 进一步进行逻辑处理 }

而在/account/redirect?...路由对应的组件中，我们需要解析路由中的params参数，按照业务逻辑检查后，将结果传递给前面的页面：

componentDidMount() { // step1: 获取url中params参数 const querys = getQueryVariable(this.props.location.search); // step2: 检查querys中的数据是否符合要求 ... // step3: 向顶级页面传递消息 return window.parent && window.parent.postMessage('data', '*'); }

至此，微信网页认证的流程完成。