生产模式下禁止React Developer Tools、Redux DevTools的使用
生产模式下禁止React Developer Tools、Redux DevTools的使用
我是leon
发布于 2019-08-28 12:03:11
发布于 2019-08-28 12:03:11
一、React Developer Tools和Redux DevTools的使用思考
React Developer Tools、Redux DevTools 可以给开发人员在研发阶段调试程序带来极大的方便。 但是，很多人忽略了一点：上了生产环境后，把一些代码细节轻易让外部人员获取，并不是好事。
解决方案就是：生产环境下，将DevTools禁止使用。
二、 禁止React Developer Tools
以下是实现的代码
// 项目入口文件index.tsx
import {
disableReactDevTools
} from '@utils/js/other';
if(process.env.NODE_ENV == 'production'){
disableReactDevTools();
}// @utils/js/other.ts
export const disableReactDevTools = (): void => {
const noop = (): void => undefined;
const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
if (typeof DEV_TOOLS === 'object') {
for (const [key, value] of (<any>Object).entries(DEV_TOOLS)) {
DEV_TOOLS[key] = typeof value === 'function' ? noop : null;
}
}
};禁止思路如下：
- 在页面的React加载完成之前（所以要在入口文件提前执行），执行以下代码
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}这样可以阻止devtools访问React上下文
- 在此基础上，遍历所有
window.__REACT_DEVTOOLS_GLOBAL_HOOK__下挂载的方法，将其重置为空函数。 - 有些浏览器是访问不到
windwo.__REACT_DEVTOOLS_GLOBAL_HOOK__的，所以要进行安全防护。
综合以上3点，就可以得出disableReactDevTools方法。
另外，只在生产环境禁止,则需要读取process.env.NODE_ENV的值，进行判断。符合要求，则执行disableReactDevTools方法。
三、禁止Redux DevTools
Redux DevTools的作者做得比较全面，已经给出了标准的解决方案。
具体实现步骤如下：
- 设置
'process.env.NODE_ENV': JSON.stringify('production') - 使用
redux-devtools-extension/developmentOnly引入方法
以下是我的项目代码片断：
import {
composeWithDevTools
} from 'redux-devtools-extension/developmentOnly';
// other code...
const store = createStore(
rootReducer,
composeWithDevTools(middlewareEnhancer)
);
// other code...四、不好的真实项目例子
五、参考
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录