使用iframe引入子应用的刷新问题解决方案

一、引言

需求背景：要实现一个平台名为创新能力建设平台，里面融合了如下系统模块功能

1、ASE引擎托管

2、ASO服务编排

3、ATP模型训练平台

4、主站的首页以及应用管理模块

Nginx方案 ？微前端方案 ？ifranme方案？

因为时间，技术栈等各种缘故，遂采用了ifranme方案来实现，初版的demo效果ok所以觉得可行（两天内完成项目运行，需求了解，技术方案确定。头发掉一地）

因为选用了iframe自然而然的带来了一个iframe的坑。就是在子应用下面操作进入任何二级页面F5刷新页面时，就会回到子应用的初始化首页。

二、问题分析

为啥会这样？？？？

因为主站内使用iframe引入子应用后，刷新页面主站页面元素要重新加载，此时iframe的src又会重新加载最初的地址，导致了这个结果

三、解决方案

既然是iframe的src重新加载最初的地址，那是不是只要我记录住子应用跳转的地址。在我刷新的时候让src加载这个记录的地址，就解决了这个问题呢？答案是可以的，非常nice！

四、实施步骤

1. 我们要监听路由变化，
2. 在路由变化的时候保持当前子应用的pathname
3. 通过判断环境，根据子应用部署后的地址进行拼接成完整的url地址
4. 通过postMessage向父应用发送消息，告诉父应用子应用当然的最新地址
5. 父应用监听子应用传递过来的url数据，然后再sessionStorage存入
6. 在父应用组件加载时或AIURL发生变化时执行 更新iframe的src地址----即可解决刷新问题

子应用 app.jsx

import { Switch, Route, Redirect, withRouter } from 'react-router-dom' // 引入withRouter

//....
// 其他代码
//...

class App extends React.Component {
  static propTypes = {
    history: PropTypes.object,
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    // 判断跳转路由不等于当前路由
    if (nextProps.location.pathname !== this.props.location.pathname) {
      console.log('路由改变触发22222', nextProps);
      let url = '/resources'
      if(nextProps.location.pathname) {
        url = nextProps.location.pathname
      }
      if (process.env.NODE_ENV === 'development') {
        url = `http://localhost:21002/#${url}`
      } else if (process.env.NODE_ENV === 'production') {
        url = `http://172.30.33.3:3002/console/resources/#${url}`
      }
      window.parent && window.parent.postMessage({ url, id: 'myIframe1'}, "*")
    }
  }

  render () {
    return (
      <ConnectedRouter history={this.props.history}>
         <Switch>
         <Route  path="/userlogin" component={login}/>
        <Dashboard>
            <Route exact path="/" render={ ()=> <Redirect to="/resources"/>}></Route>
            <Route exact path="/resources" component={ResourcesList}/>
            <Route exact path="/myapply" render={ ()=> <Redirect to="/resources/myapply"/>}></Route>
            <Route exact path="/resources/myapply" component={ResourcesApplysList}/>
            <Route exact path="/resources/apply" component={ResourcesApply}/>
            <Route exact path="/key" render={ ()=> <Redirect to="/resources/key"/>}></Route>
            <Route exact path="/resources/key" component={Key}/>
            {/* <Redirect to="/resources"/> */}
        </Dashboard>
        </Switch>
      </ConnectedRouter>
    )
  }
}

export default withRouter(App)

主应用

//.....
//其他代码
//.....

<div className="iframe content">
	{testActive == '1' && <div className="childen-content">{props.children}</div>}
	{testActive === '2' && (<iframe src={`${AIURL}`} className="iframe" frameBorder="0"></iframe>)}
	{testActive === '3' && (
        // <iframe src="http://localhost:2123" className="iframe" frameBorder="0"></iframe>
	<div className="childen-content ">正在开发中~</div>)}
	{testActive === '4' && (
 	// <iframe src="http://localhost:2123" className="iframe" frameBorder="0"></iframe>
 	<div className="childen-content">正在开发中~</div>)}
</div>
//.....
//其他代码
//.....


// 监听子应用传递过来的url数据，然后再sessionStorage存入
window.onmessage=function(e) {
	if(e.data.id === 'myIframe1') {
		sessionStorage.setItem('myIframe1', e.data.url)
	} else if ( e.data.id === 'Logout') {
		history.push('/login?redirect=' + window.location.href);
	}
}

  useEffect(() => {
    // 在组件加载时或AIURL发生变化时执行 更新src的地址----即可解决刷新问题
    let url = sessionStorage.getItem('myIframe1')
    console.log('当前AI URL:', AIURL);
    console.log('当前缓存url:', url);
    if(url && AIURL != url) {
      updateAiUrl(url)
    }
  }, [AIURL]);

  const updateAiUrl = (newAiUrl) => {
    setAiUrl(newAiUrl);
  };

五、注意事项

子应用登录失效是同理，发送一个标识告诉主应用，由主应用跳转到主站登录首页。

六、结论

通过这些解决方案，可以确保在刷新页面后，用户能够顺利地继续使用子应用，并提升整体的用户满意度和系统稳定性。

非常nice，满足能跑就行原则。