需求:在前端开发过程中,会遇到生产坏境不让用户打开控制台,防止不法分子虚假信息操作。
废话不多说一共两步,添加我们的js方法,和在全局使用这个方法。
第一步:添加我的js文件:
//禁用开发者工具
export default async () => {
if ((localStorage.getItem('devTools') && localStorage.getItem('devTools') === 1) || localStorage.getItem('devTools') === '1') {
return;
}
document.onkeydown = () => {
//禁用F12
if (window.event && window.event.keyCode === 123) {
return false;
//禁用ctrl+shift+i,
} else if (window.event.ctrlKey && window.event.shiftKey && window.event.keyCode === 73) {
return false;
//屏蔽Shift+F10
} else if (window.event.shiftKey && window.event.keyCode === 121) {
return false;
}
};
window.oncontextmenu = (e) => {
e.preventDefault();
};
setInterval(function () {
check();
}, 1000);
var check = function () {
function doCheck(a) {
if (('' + a / a)['length'] !== 1 || a % 20 === 0) {
(function () {})['constructor']('debugger')();
} else {
(function () {})['constructor']('debugger')();
}
doCheck(++a);
}
try {
doCheck(0);
} catch (err) {
console.error(err);
}
};
check();
};
第二步:在全局使用,以vue项目为例,在main.js中引用使用
import disableDeveloperTools from '你存放js文件的路径';
app.use(store);
app.use(router);
//判断生产环境使用
if (import.meta.env.MODE === 'production') {
disableDeveloperTools();
}
app.mount('#app');