JavaScript 로그인하지 않고 제한된 페이지에 액세스하지 못하도록

Question

페이지에 로그 인한 후 로그인 페이지가 있습니다. 내 다음 페이지 (환영)로 이동합니다. 문제는 다음 페이지 (환영) 페이지의 URL을 복사하여 붙여 넣으면 로그인 액세스없이 다음 페이지를 열도록 제한하고 싶다는 것입니다. 가이드 안내.

스크립트

function click() { 
    inputname = $('#name').val(); 
    inputpassword =$('#pass').val(); 

    for (i in data.username)  //to match username with provided array 
     { 
     name = data.username[i]; 

     for (i in data.password){ 
      pass = data.password[i]; 

      if (inputname == name & inputpassword == pass){ 
       window.open('welcome1.html','_self'); 
      }    
     } 
    } 

    if (inputname != name & inputpassword != pass){ 
     alert("Wrong Password"); 
    } 
} 

HTML

<input type="mail" id="name"> 
<input type="password" id="pass"> 
<input type="submit" id="submit" value="log In" onclick= "click()"> 

Answer 1

이 인증의 안전한 방법이 아닙니다. 이 솔루션은 보안을 설정하려는 시스템에 있어서는 안됩니다. 인증은 클라이언트가 아닌 서버에서 이루어져야합니다.

질문에서 사용자가 첫 번째 페이지에서 인증 한 경우 두 번째 페이지를 확인하지 않습니다. 이를 확인하려면 세션 저장 장치를 사용해야합니다.

그리고 두 번째 페이지에서, 사용자가 인증되어 있는지 확인

// LOGIN.js 
 
function click() { 
 
    inputname = $('#name').val(); 
 
    inputpassword =$('#pass').val(); 
 

 
    for (i in data.username)  //to match username with provided array 
 
    { 
 
     name = data.username[i]; 
 

 
     for (i in data.password){ 
 
      pass = data.password[i]; 
 

 
      if (inputname == name & inputpassword == pass){ 
 
       //The user has successfully authenticated. We need to store this information 
 
       //for the next page. 
 
       sessionStorage.setItem("AuthenticationState", "Authenticated"); 
 
       
 
       //This authentication key will expire in 1 hour. 
 
       sessionStorage.setItem("AuthenticationExpires", Date.now.addHours(1)); 
 
       
 
       //Push the user over to the next page. 
 
       window.open('welcome1.html','_self'); 
 
      }    
 
     } 
 
    } 
 

 
    if (inputname != name & inputpassword != pass){ 
 
     alert("Wrong Password"); 
 
    } 
 
} 
 

 
//addHours to a date. 
 
//Credit to: Kennebec 
 
//https://stackoverflow.com/questions/1050720/adding-hours-to-javascript-date-object 
 
Date.prototype.addHours = function(h) {  
 
    this.setTime(this.getTime() + (h*60*60*1000)); 
 
    return this; 
 
}

<!-- LOGIN.html ---> 
 

 
<input type="text" id="name" name="name" /> 
 
<input type="text" id="pass" name="pass" /> 
 
<input type="submit" id="sub" name="sub" onclick="click();" />

. 그렇지 않은 경우 액세스 거부 페이지로 밀어 넣으십시오.