Login JavaScript

Free code computer screen image

Login JavaScript

Untuk mencegah orang masuk langsung ke halaman dashboard melalui link tanpa login terlebih dahulu, Anda dapat menggunakan session atau token untuk memeriksa apakah pengguna telah login sebelumnya. Di bawah ini adalah contoh implementasinya:

index.html (Halaman Login)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
</head>
<body>
  <h2>Login</h2>
  <form id="loginForm">
    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username"><br>
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="Login">
  </form>

  <script src="login.js"></script>
</body>
</html>

dashboard.html (Halaman Dashboard)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard</title>
</head>
<body>
  <h2>Welcome to Dashboard</h2>
  <p>You are logged in!</p>
</body>
</html>

login.js

document.addEventListener("DOMContentLoaded", function() {
  const loginForm = document.getElementById("loginForm");

  loginForm.addEventListener("submit", function(event) {
    event.preventDefault();

    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    // Ganti dengan logika login yang sesuai
    if (checkCredentials(username, password)) {
      sessionStorage.setItem("loggedIn", true); // Set session bahwa pengguna sudah login
      window.location.href = "dashboard.html";
    } else {
      alert("Username atau password salah!");
    }
  });

  // Periksa session saat halaman dimuat
  if (sessionStorage.getItem("loggedIn")) {
    window.location.href = "dashboard.html"; // Redirect ke halaman dashboard jika sudah login
  }

  // Data pengguna yang disimpan dalam JSON
  const users = [
    { username: "user1", password: "password1" },
    { username: "user2", password: "password2" },
    { username: "user3", password: "password3" }
  ];

  // Fungsi untuk memeriksa keberadaan pengguna
  function checkCredentials(username, password) {
    return users.some(user => user.username === username && user.password === password);
  }
});

Dalam contoh ini, setelah pengguna berhasil login, kami menyimpan status login dalam sessionStorage menggunakan sessionStorage.setItem("loggedIn", true). Ketika halaman dashboard dimuat, kami memeriksa apakah pengguna sudah login dengan memeriksa nilai loggedIn dalam sessionStorage. Jika sudah login, pengguna akan diarahkan ke halaman dashboard; jika belum, mereka akan tetap di halaman login.

Tags: , , ,

Tinggalkan Balasan