如何检测用户是否被封禁？Cookie检测封禁状态时页面空白无跳转问题求助

问题排查与修复方案 #

现有代码的错误点 #

• 核心逻辑函数checkCookie仅完成定义，没有被主动调用，所以所有校验逻辑从未执行
• 代码中调用的getCookie不是JavaScript内置方法，你没有自行实现该函数，运行时会抛出引用错误直接中断JS执行
• 校验逻辑写反：你命名Cookie字段为banned，按常规逻辑值为1代表用户被封禁，但你的判断条件是ban != "1"时提示封禁，和需求完全相反
• 跳转代码window.location.replace执行后当前页面会立即卸载，后续的alert("Welcome")永远不会触发
• 页面body区域没有任何可见元素，你仅给head标签设置了背景色，样式表中定义的h1、p等元素都没有实际插入到页面中，所以页面显示空白

修复后的完整代码 #

<html>
<head> 
  <style>
    /* 把背景色设置到body和html上才能全局生效 */
    html, body {
      background-color: #171745;
      margin: 0;
      padding: 20px;
    }
    h1 {
      color: white;
    }
    h3 {
      color: white;
    }
    h5 {
      color: gray;
    }
    p {
      color: white;
    }
  </style>
</head>
<body>
  <!-- 加个可见提示避免空白 -->
  <p>正在校验用户权限...</p>
  <script>
    // 先实现getCookie方法
    function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    }

    function checkCookie() {
      let ban = getCookie("banned");
      // 修正逻辑：banned等于1时为被封禁
      if (ban === "1") {
        alert("You are banned.");
      } else {
        // 先弹欢迎再跳转，避免alert被跳过
        alert("Welcome");
        window.location.replace("https://tuan-os.github.io/home");
      }
    }

    // 页面加载完成后主动调用校验函数
    window.onload = checkCookie;
  </script>
</body>
</html>

Cookie校验额外注意事项 #

• 浏览器控制台的「应用/Application」标签页可以查看当前站点的所有Cookie，你可以先手动添加banned字段测试逻辑是否生效
• 注意Cookie的作用域和有效期，如果Cookie是设置在父域名或者其他路径下，当前页面可能无法读取，需要保证Cookie的Domain和Path属性和当前页面匹配
• 如果是跨站场景下需要读取Cookie，需要确保Cookie设置了SameSite属性为合适的值

内容的提问来源于stack exchange，提问作者Tran tuan minh