after use html and javascript to make login page, want to prevent others go to linked page directly-CodePudding

I have a html login page and use javascript to hide the user name and password:

Javascript:

function myFunction(){
var user = document.getElementById("username").value;
 var pass = document.getElementById("pass").value;

if(user == "user1" && pass == "zzxx"){
          window.location.href="about.html"}

 else if(user == "user2" && pass == "xxzz"){
        window.location.href="about2.html"}
 
   
else if(user == "user3" && pass == "ooppp"){
        window.location.href="about3.html"  
   
     } else{
  alert("Incorrect username or password");
  }

HTML:

    html lang="en" dir="ltr">
 <head>

  <meta charset="utf-8">
 <title>Login</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="css/style.css">
   <script src="js/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="js/invisible_debut.js" ></script>

  </head>
  <body>

   <div class="loginBox">
   
    <h1>Login</h1>
    <div class="textbox">
        <i class="fas fa-user"></i>
        <input  name="username" id="username" type="text"placeholder="Username">
    </div>

    <div class="textbox">
        <i class="fas fa-lock"></i>
        <input name="pass" id="pass" type="password"placeholder="Password">
    </div>

    <button  value="Submit" class="btn btn-success" 
    onclick="myFunction()">Submit</button>
        </form>
    </div>
    </body>

 <div class="bg"></div>
   </html>

I want to prevent the user to go to about.html by directly typing ..../about.html I only want people to login through user name and password. How can I do that? Many Thanks!

CodePudding user response：

You will need to store some information on

localStorage

to make sure that this user already visited and logged in to your website. When users will try to go directly to the about page without logging in - you can redirect them to the login page.

CodePudding user response：

Use session-storage or local-storage to store the value of the user, then check that value in about page, if not exists then redirect the user back to the index page.

function myFunction() {

  var user = document.getElementById("username").value;
  var pass = document.getElementById("pass").value;

  if(user == "user1" && pass == "zzxx") {
    window.sessionStorage.setItem("user", "user1"); 
    window.location.href="about.html"
  } else if(user == "user2" && pass == "xxzz") {
    window.sessionStorage.setItem("user", "user2");
    window.location.href="about2.html"
  } else if(user == "user3" && pass == "ooppp") {
    window.sessionStorage.setItem("user", "user3");
    window.location.href="about3.html"
  } else {
    alert("Incorrect username or password");
  }

Use the above session-storage-item in about page

window.onload = function() {
  if (window.sessionStorage.getItem("user")) {
    var usr = window.sessionStorage.getItem("user");
    if(user != "user1") {
      window.location.replace("index.html");
    }
  } else {
    window.location.replace("index.html");
  }
}

CodePudding user response：

you can use document.referrer to check if its your website or not