如何在React构建产物中实现定时自动销毁功能，无需服务端代码参与

方案1：运行时时间校验 + 动态内容擦除 #

适用于对内容保密性要求不高的场景，实现成本最低：

• 先在项目的构建配置中提前注入过期时间阈值：可以写一段 Node 脚本在执行 npm run build 前计算好目标周五早6点的时间戳，赋值给框架内置的环境变量（比如 Create React App 下的 REACT_APP_EXPIRE_TIMESTAMP），构建时会直接打包进静态产物中。
• 在应用入口文件（通常是 src/index.js/src/index.tsx）的最顶部写入校验逻辑，优先于所有业务代码执行：用户访问页面时读取本地时间，和注入的过期时间戳对比，若已过有效期则直接执行擦除逻辑：
  • 全量擦除场景：直接执行 document.body.innerHTML = '' 清空页面所有内容，同时清除 localStorage、sessionStorage、IndexedDB 中所有和应用相关的存储数据，再动态移除页面中所有的脚本、样式标签阻断剩余逻辑执行。
  • 部分内容擦除场景：给需要销毁的组件加统一的权限校验包裹层，命中过期规则时直接返回空内容，同时清除对应组件的状态和缓存数据。

方案2：敏感内容加密 + 过期销毁密钥 #

适用于核心内容不能被用户从静态资源中直接扒取的场景，安全性更高：

• 构建阶段对需要擦除的敏感内容做 AES 对称加密，加密密钥直接硬编码到构建产物的校验逻辑中，打包后的静态资源里只存储密文内容。
• 应用运行时首先校验时间，未到有效期则调用密钥解密密文正常渲染内容；命中过期规则后直接从内存中删除密钥，同时清空所有已经渲染的敏感内容，即使用户手动下载静态资源拿到的也只是无法解密的密文，不会泄露内容。

注意事项 #

• 校验逻辑必须放在入口文件最顶部，不要放到异步加载的分包 chunk 中，避免过期后业务内容先于校验逻辑渲染。
• 严格不依赖服务端的前提下只能使用客户端本地时间做校验，存在用户手动修改本地时间绕过规则的风险；如果允许调用第三方公开时间接口，可以在代码里增加多源时间校验逻辑降低被绕过的概率。
• 如果需要调整过期规则，只需要修改构建阶段的时间计算逻辑即可，不需要改动业务代码。

内容的提问来源于stack exchange，提问作者Vimal Kurien Sam