我正在Glitch.com上为我和我的朋友建立一个网站。我已经知道HTML/CSS，并正在学习JS。虽然它不是那么安全，但我希望登录系统是由JS制成的，因为这个项目只是为了好玩，提高我的技能。
我目前有登录页面与HTML/CSS，并写了一些JS的if语句登录验证。我希望成功登录的用户被重定向到另一个页面，home.html。
但是，我仍然可以通过在链接的末尾插入/home.html来访问home.html，而不需要登录。我该如何解决这个问题?
登录HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login for Access</title>
<link rel="stylesheet" href="/login.css">
<script src="/login.js" defer></script>
</head>
<body>
<h1>Login for Access</h1>
<p id = "access-denied">Incorrect User ID/Password</p>
<form id = "login-form">
<label for="user_id">User ID:</label>
<input type="number" id="user_id" name="user_id" required><br><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" required><br><br>
<input type="submit" value= "Submit" id = "login-submit">
</form>
</body>
</html>
JS代码:
const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-submit");
const loginErrorMsg = document.getElementById("access-denied");
loginButton.addEventListener("click", (e) => {
e.preventDefault();
const user_id = loginForm.user_id.value;
const password = loginForm.pwd.value;
if (user_id === "id" && password === "pass") {
window.location.href="home.html";
} else {
loginErrorMsg.style.opacity = 1;
}
})
如果有什么不清楚的地方我很抱歉。如果有人能编辑得更清楚，我将不胜感激。
您不能使用客户端代码来阻止人们访问页面。客户端代码最终在浏览器所有者的控制下。
认证/授权必须在服务器端完成。