reactjs - React - 如何让访问者使用反应开发工具但不能编辑状态和道具

Question

我一直在开发一个 react 应用程序，我认为 react 开发工具仅在应用程序的开发版本上可用，但我很惊讶我可以在生产版本上使用它，甚至可以更改路线和状态以及其他东西. 而且我不想从应用程序中完全禁用反应开发工具（通过向 index.html 添加脚本来卸载它）。所以我想做的是禁用对 facebook.com 中的反应开发工具的编辑（你可以在那里打开反应开发工具，但你不能编辑任何很酷的道具或状态）所以有什么好的方法吗？不禁用整个反应开发工具？

Answer 1

你不能也不应该。开发工具旨在为开发目的而构建，因此为什么有人应该在生产中使用它。

您唯一的选择是使用以下代码完全删除 devtools：

<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>

或者您可以考虑将其与您的环境条件一起包装，就像您可以在服务器端渲染中执行以下操作：

#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}

无论如何，将业务逻辑和敏感数据放回您的服务器仍然是一个好习惯。