javascript - 我正在尝试使用 JavaScript 密码保护网页

Question

我正在尝试用密码保护我的网页(例如 http://mywebsite.com/)，这样用户每次 session 只需输入一次密码。这是我的问题:如果用户取消了初始提示或输入了错误的密码，然后被重定向到 google.com，然后重新访问 http://mywebsite.com/ 它允许他们在不提示输入密码的情况下查看页面。

不确定我在解决这个问题的小后门方面做错了什么。

这是我尝试实现的 JavaScript:

//Protect only once per browser session? (0=no, 1=yes)
       //Specifying 0 will cause protect to load every time page is loaded
   var once_per_session=1

   function get_cookie(Name) {
          var search = Name + "="
          var returnvalue = "";
          if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search)
            if (offset != -1) { // if cookie exists
                offset += search.length
                // set index of beginning of value
                end = document.cookie.indexOf(";", offset);
                // set index of end of cookie value
                if (end == -1)
                     end = document.cookie.length;
                returnvalue=unescape(document.cookie.substring(offset, end))
                }
           }
          return returnvalue;
   }

    function passwordProtect(){
        var password;
        var pass1 = "thePassword";
        password = prompt('Enter password to view page',' ');
        if(password == pass1){
            alert('Correct password, click ok to enter');
            window.location="http://mywebsite.com";
        }
        else {
            window.location="http://google.com";
        }
    }

   function loadornot(){
          if (get_cookie('protect')==''){
          passwordProtect()
          document.cookie="protect=yes"
          }
   }

   if (once_per_session==0)
          passwordProtect()
   else
          loadornot()

Answer 1

如果 protect cookie 是空字符串，您的 loadornot() 只会加载 passwordProtect()。它还将 cookie 的值设置为“yes”。因此，下次您调用它时，cookie 不再是空白，并且永远不会调用 `passwordProtect()'。

您似乎相信，如果 passwordProtect() 将用户发送到未能提供正确密码的 google 页面，则 loadornot() 函数将结束而不执行最后一行。事实并非如此。请记住，javascript 具有异步执行模型，这意味着 loadornot() 在调用 passwordProtect() 时不会停止执行。当您的用户输入密码时，将 cookie 值设置为“yes”的行已经执行。

如果您希望函数 A 根据函数 B 中做出的决定的结果有条件地执行，您必须告诉函数 A 等待，直到函数 B 告诉您已做出决定。做到这一点的主要方法是回调和 promise 。

有关如何执行回调的简单示例，请参阅 this example来自 w3schools.com。有关使用回调和 promise 自定义确认框的更多示例，请参阅 this .