使用React自定义Hook保护登录页面：禁用开发者工具

在Web开发中，有时我们需要保护敏感页面（如登录页）免受开发者工具的干扰。本文将介绍如何创建一个React自定义Hook来实现这一功能。

技术栈：react vite

disableDevTools函数详解

这个函数实现了多种防护措施：

export function disableDevTools() {
  // 阻止右键菜单
  const blockContextMenu = (e) => {
    e.preventDefault();
    return false;
  };

  // 阻止快捷键打开开发者工具
  const blockKeyDown = (e) => {
    if (
      e.key === "F12" ||
      (e.ctrlKey && e.shiftKey && e.key === "I") ||
      (e.ctrlKey && e.shiftKey && e.key === "J") ||
      (e.ctrlKey && e.key === "U")
    ) {
      e.preventDefault();
      return false;
    }
  };

  // 添加事件监听
  document.addEventListener("contextmenu", blockContextMenu);
  document.addEventListener("keydown", blockKeyDown);

  // 定期检查开发者工具是否打开
  let devToolsOpened = false;
  const checkInterval = setInterval(() => {
    const widthThreshold = window.outerWidth - window.innerWidth > 160;
    const heightThreshold = window.outerHeight - window.innerHeight > 160;
    if ((widthThreshold || heightThreshold) && !devToolsOpened) {
      devToolsOpened = true;
      window.location.reload();
    }
  }, 1000);

//return 的清理函数不会在赋值时自动执行，必须显式调用（如 cleanup()）或由框架（React/Vue）自动调用。
  // 返回清理函数
  return () => {
    document.removeEventListener("contextmenu", blockContextMenu);
    document.removeEventListener("keydown", blockKeyDown);
    clearInterval(checkInterval);
  };
}

useDisableDevTools Hook详解

这个自定义Hook将上述功能集成到React组件中：

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { disableDevTools } from "@/utils/nocheck";

function useDisableDevTools() {
  const location = useLocation();

  useEffect(() => {
    if (
      location.pathname.includes("login") &&
      import.meta.env.VITE_DEVTOOLS_OPEN === "true"
    ) {
      const clean = disableDevTools();
      return clean;
    }
  }, [location.pathname]);
}

export default useDisableDevTools;

功能特点

1. 右键菜单禁用：阻止用户通过右键菜单打开开发者工具

2. 快捷键拦截：拦截F12、Ctrl+Shift+I、Ctrl+Shift+J、Ctrl+U等常用开发者工具快捷键

3. 窗口大小检测：通过比较内外窗口大小差异检测开发者工具是否打开

4. 自动清理：使用React的useEffect清理机制确保资源释放

使用场景

这个Hook特别适合用于：

• 登录页面保护

• 敏感操作页面

• 防止用户篡改页面内容

  使用方法

  在需要保护的组件中引入并使用：

   import useDisableDevTools from "@/hooks/useDisableDevTools";
  ​function LoginPage() {
    useDisableDevTools();  
    // ...页面其他逻辑
  }

  注意事项

• 这种保护措施不能完全阻止技术娴熟的用户访问开发者工具

• 可能会影响用户体验，应谨慎使用

• 在生产环境中使用时，建议结合其他安全措施

• 通过环境变量控制是否启用，便于开发调试