需求场景:
我们要调用第三方文档,新开一个网页到第三方授权页面–授权成功后回调到我们自己的成功页面,在我们页面获取到成功的请求code
遇到的问题:
授权弹框,成功页面都使用同一状态机(授权成功以后使用状态机,更新不了状态机里的方法,授权弹框监听不到)
解决问题:
在成功页面存储code值,在url添加后缀
useEffect(() => {
if (repHost && window.location.origin !== repHost) {
let url = repHost + AUTHORIZATION_SUC;
if (code) {
url = url + '?code=' + code + '&state=' + state;
} else {
url = url + '?wps=' + wps;
}
window.location.href = url;
return null;
}
if (code) {
// 腾讯文档 授权成功
gooStorage.set('txCode', code);
}
if (wps) {
// 金山文档 授权成功
gooStorage.set('wpsCode', wps);
}
setTimeout(() => {
// 关闭当前窗口
window.open('about:blank', '_top').close();
}, 500);
}, []);
在授权弹框页面定时器浏览器有没有存储code,注意监听就取消定时器
useEffect(() => {
props.updateState({ toSpaceId: spaceId, toBookId: bookId });
// 定时器查看 是否授权成功
codeTimer = setInterval(() => {
const txCode = gooStorage.get('txCode');
const wpsCode = gooStorage.get('wpsCode');
if (txCode) {
// 腾讯授权成功
props.updateAuthorizeType(true);
TxGetToken({ code: txCode });
clearInterval(codeTimer);
gooStorage.remove('txCode');
}
if (wpsCode) {
// 金山授权成功
props.updateAuthorizeType(true);
clearInterval(codeTimer);
gooStorage.remove('wpsCode');
}
}, 1000);
return () => {
// 离开
gooStorage.remove('txCode');
gooStorage.remove('wpsCode');
clearInterval(codeTimer);
};
}, [authorizeOpen, authorizeType]);