vue/Vue禁止打开控制台/前端禁止打开控制台方法/禁用F12/禁用右键/禁用ctrl+shift+i/禁止预先调试打开控制台

需求:要求用户不能在网页上打开控制台查看源代码,不能查看接口请求---开发人员可以打开控制台

解决问题思路:

1,禁用所有打开控制台的方法

2,在定时器里判断浏览器窗口宽高和页面宽高的差值,来断定用户有没有打开控制台,打开便一直刷新页面,并且给提示关闭控制台

3,给页面某个标签事件,触发事件解除禁用的打开控制台的方法,并且清除定时器

解决方法: 

(1),禁用F12,禁用ctrl+shift+i, 屏蔽Shift+F10

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;
      }
    };

(2),禁止预先调试打开控制台,当打开控制台的时候就刷新页面

var threshold = 100;
this.timer1 = setInterval(function () {
      //当浏览器窗口宽度或高度与页面的宽度和高度的差值大于100的时候触发页面刷新
      if (window.outerWidth - window.innerWidth > threshold || window.outerHeight - window.innerHeight > threshold) {
        // 刷新页面；
        window.location.reload()
        alert('请关闭控制台重新输入地址进入网站');
      }
    })

(3),通过监听某个变量有没有改变来清除定时器和解除禁用的打开控制台的方法,从而打开控制台

watch: {
    //kztShow这个是我自定义的变量,
    kztShow: {
      handler: function (val, oldVal) {
        if (val) {
          document.onkeydown = () => {
                  if (window.event && window.event.keyCode == 123) {
                    return true;
                 }
               };
          clearInterval(this.timer1)
        }
      },
      deep: true   // 深度监听，监听到更深层级值的变化
    },
}