Question

我正在尝试一些有关简单http身份验证的事情，我创建了一个登录页面，并且正在使用此javascript函数从服务器请求受保护的页面，并且正在接收http 200，并且成功接收了我想要的页面内容。问题是在我收到http 200之后，如果我想转到另一个受保护的页面浏览器，则要求提供凭据。我不想在每次页面更改时都输入凭据。

如果我不使用登录页面，而是直接向浏览器输入受保护的url，并且输入浏览器形式的凭据：我可以浏览其他页面而无需每次都输入凭据。

function login()
{
    var username = document.getElementById("UsernameInput").value;
    var password = document.getElementById("PasswordInput").value;

    var authorizationBasic = window.btoa(username + ':' + password);

    var request = new XMLHttpRequest();
    request.open("GET", "protected/mainPageEN.html", true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.setRequestHeader('Authorization', 'Basic ' + authorizationBasic);
    request.setRequestHeader('Accept', 'html');
    request.send();

    request.onreadystatechange = function () 
    {           
        if(request.readyState == 0) //Request not initialized
        {
                    alert("Not initializes");         
        }   
        else if(request.readyState == 1) //Server connection established
        {
                alert("Server connection established");           
        }
        else if(request.readyState == 2) //Request received.
        {
                    alert("Request received.");       
        }               
        else if(request.readyState == 3) //Processing request
        {
                alert("Processing request");              
        }   
        else if(request.readyState == 4) //Done
        {
                if(request.status == 200) //OK
                {
                    alert(window.location.hostname);

                    //Set cookie
                    var header = "Basic " + authorizationBasic;
                    document.cookie = "Authorization=" + header;

                    window.location = "http://" + window.location.hostname + "/protected/mainPageEN.html";

                }
                else if(request.status == 403) //Forbidden
                {
                    alert(request.statusText);
                    alert("Forbidden");
                }
                else if(request.status == 404) //Not found
                {
                    alert(request.statusText);
                    alert("Not Found");
                }
                else
                {
                alert(request.status);
                    alert(request.statusText);
                }
        }   
    };  
}

Answer 1

看起来您的项目中需要某种身份验证机制。保存凭证以备后用非常冒险，因此不建议使用。由于您尚未提及正在使用的服务器端编程语言，因此无法推荐使用的语言。但是，您必须与服务器端编程语言/框架一起在这方面进行一些研究。

假设您要在客户端临时保存一些不敏感的内容，可以使用cookie，localstorage或webstorage。

Cookies -Cookie是网站存储在您计算机上的一小部分信息。 Cookies仅包含少量文本，没有其他内容。该文本可以是用户ID，会话ID或任何其他文本。 Read more

sessionStorage -为每个给定的来源维护一个单独的存储区域，该存储区域在页面会话期间有效（只要打开浏览器，包括页面重新加载和还原）。 Read more

localStorage -只读的localStorage属性允许您访问文档来源的存储对象；存储的数据跨浏览器会话保存。 localStorage与sessionStorage相似，不同之处在于，尽管localStorage中存储的数据没有到期时间，但页面会话结束时（即关闭页面时），存储在sessionStorage中的数据将被清除。 Read more

还值得检查各种不同浏览器的浏览器兼容性和这些存储所支持的最大大小。

我希望这会有所帮助，谢谢。

保存简单的Http身份验证凭据供以后使用

1 个答案: