feat: 前端防调试

src/layout/components/Header/components/system-settings/index.vue

@@ -55,6 +55,13 @@
           <a-slider :default-value="gapInfo[0]" :min="0" :max="300" :style="{ width: '100px' }" @change="onWatermarkGap" />
         </div>
       </div>
+      <div>
+        <div class="title">系统设置</div>
+        <div class="flex-row">
+          <div>防调试</div>
+          <a-switch v-model="debugPrevention" />
+        </div>
+      </div>
     </div>
   </a-drawer>
 </template>
@@ -65,6 +72,7 @@ import { storeToRefs } from "pinia";
 import { useRoutesConfigStore } from "@/store/modules/route-config";
 import { useThemeConfig } from "@/store/modules/theme-config";
 import { currentlyRoute } from "@/router/route-output";
+import { DebugControl } from "@/utils/debug-prevention";
 const themeStore = useThemeConfig();
 const routerStore = useRoutesConfigStore();
 const {
@@ -77,7 +85,8 @@ const {
   watermarkStyle,
   watermarkRotate,
   watermarkGap,
-  darkMode
+  darkMode,
+  debugPrevention
 } = storeToRefs(themeStore);
 const { tabsList, cacheRoutes } = storeToRefs(routerStore);
 const route = useRoute();
@@ -106,6 +115,23 @@ const tabsChange = (e: Boolean) => {
     currentlyRoute(route.name as string);
   }
 };
+
+// 监听debug开关
+const debugControl = new DebugControl();
+watch(
+  () => debugPrevention.value,
+  newValue => {
+    if (newValue) {
+      debugControl.start();
+    } else {
+      debugControl.stop();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
 const emits = defineEmits(["systemCancel"]);
 const handleCancel = () => {
   emits("systemCancel");

src/store/modules/theme-config.ts

@@ -34,6 +34,8 @@ const themeConfig = () => {
   const watermarkRotate = ref<number>(330);
   // 水印间隙
   const watermarkGap = ref<[number, number]>([100, 100]);
+  // 防止调试
+  const debugPrevention = ref<Boolean>(false);
   // 布局模式：layoutDefaults、layoutHead、layoutMixing
   const layoutType = ref<string>("layoutDefaults");
   // 色弱模式
@@ -92,6 +94,7 @@ const themeConfig = () => {
     watermarkStyle,
     watermarkRotate,
     watermarkGap,
+    debugPrevention,
     layoutType,
     colorWeakMode,
     grayMode,

src/utils/debug-prevention.ts

@@ -0,0 +1,120 @@
+/**
+ * 阻止键盘事件打开控制台
+ */
+class KeydownControl {
+  /**
+   * 阻止键盘事件打开控制台
+   * 主要的组合键有四种：
+   * 1、ctrl+shift+i
+   * 2、F12
+   * 3、ctrl+shift+c
+   * 4、shift+f10
+   * @param e 键盘事件
+   */
+  private keydown = (e: KeyboardEvent) => {
+    const code = e.code; // 具体按键
+    const ctrl = e.ctrlKey; // Control键是否按下
+    const shift = e.shiftKey; // Shift键是否按下
+    // ctrl+shift+i
+    const isCSI = ctrl && shift && code === "KeyI";
+    // F12
+    const isF12 = code === "F12";
+    // ctrl+shift+c
+    const isCSC = ctrl && shift && code === "KeyC";
+    // shift+f10
+    const isSF10 = shift && code === "F10";
+    // 禁止打开控制台
+    if (isF12 || isCSI || isCSC || isSF10) {
+      e.preventDefault();
+    }
+  };
+  // 监听键盘事件
+  start() {
+    document.addEventListener("keydown", this.keydown);
+  }
+  // 移除键盘事件监听
+  stop() {
+    document.removeEventListener("keydown", this.keydown);
+  }
+}
+
+/**
+ * 阻止鼠标事件打开控制台
+ */
+class RightMouseControl {
+  /**
+   * 阻止鼠标事件打开控制台
+   * @param e 鼠标事件
+   */
+  private rightClick = (e: MouseEvent) => {
+    e.preventDefault();
+  };
+  // 监听鼠标右键
+  start() {
+    // 禁用鼠标右键菜单
+    document.addEventListener("contextmenu", this.rightClick);
+  }
+  // 移除鼠标右键监听
+  stop() {
+    document.removeEventListener("contextmenu", this.rightClick);
+  }
+}
+
+/**
+ * 使用debugger关键字阻止打开控制台
+ */
+class DebugProtector {
+  private isActive = false;
+
+  start() {
+    if (this.isActive) return;
+    this.isActive = true;
+    this.asyncCheck();
+  }
+
+  private asyncCheck() {
+    if (!this.isActive) return;
+
+    debugger;
+
+    // 异步调度避免栈溢出
+    setTimeout(() => {
+      this.asyncCheck();
+    }, 200); // 保持0.2秒间隔
+  }
+
+  stop() {
+    this.isActive = false;
+  }
+}
+
+/**
+ * 防调试开关
+ * 1、阻止键盘事件打开控制台
+ * 2、阻止鼠标事件打开控制台
+ * 3、使用debugger关键字阻止打开控制台
+ */
+class DebugControl {
+  private keydown = new KeydownControl();
+  private rightMouse = new RightMouseControl();
+  private protector = new DebugProtector();
+
+  /**
+   * 开启防调试
+   */
+  start() {
+    this.keydown.start();
+    this.rightMouse.start();
+    this.protector.start();
+  }
+  /**
+   * 关闭防调试
+   */
+  stop() {
+    this.keydown.stop();
+    this.rightMouse.stop();
+    this.protector.stop();
+  }
+}
+
+export { DebugControl };