526互联

如何杀死保活的无界/wujie子应用？

发布时间 2023-08-31 16:07:10作者: 脆皮鸡

原因

  1. 由于业务原因，子应用都需要保持状态，所以给子应用都设置为保活模式，在路由跳转时，无奈只能通过eventBus传递给子应用，由子应用进行跳转。
  2. 但是当出现一些情况我们需要刷新子应用，比如登录状态变了，用户退出登录，重新登录进行，子应用应该重新打开，虽说可以重新传递用户信息等参数给子应用，但是要处理的逻辑就未免过多了。
  3. 所以，就需要一个方法，让保活的子应用失效，在切换到该子应用时，子应用能够重新加载。
  4. 之前尝试了一下刷新页面(window.reload)，可以把子应用杀死，但是太不优雅了，而且用户体验不好。
  5. destroyApp虽然杀死了应用，但是再也打不开了（没试过，官方说如果再也用不到该子应用才使用这个方法）。
  6. 无界作者在github的issue中提到，未来也许会提供refreshApp的方法，用来主动刷新保活的子应用。
  7. 但是现阶段还未提供这个方法，可以按照下面的方式来销毁应用。

具体方法

在子应用中销毁

// 在子应用中调用这个方法，即可把当前子应用的沙箱缓存清除
window.__WUJIE?.inject?.idToSandboxMap.clear();

在主应用中销毁

// 主应用可以通过下述方法，主动清除子应用的沙箱缓存
const SUB_NAME = "subApp";
const SUB_WINDOW = window.document.querySelector(`iframe[name=${SUB_NAME}]`).contentWindow; // 这里的window应该是顶级窗口，也就是主应用的window
const SUB_IDMAP = SUB_WINDOW.__WUJIE?.inject?.idToSandboxMap;
const refreshApp = () => SUB_IDMAP.clear();
refreshApp();

// 如果在销毁时，主应用当前的路由就是目标子应用的路由，销毁后，子应用会失去响应，所以建议销毁后主应用应该及时跳转回首页
import { useRouter } from "vue-router";
const router = useRouter();
router.push('/'); // 填入首页的路由

可能会出现的问题

  1. 主应用销毁保活子应用后，若还处于子应用，点击切换路由，子应用会失去响应，并提示以下错误。
    image