在前後端分離的項目中，登入功能是一個不可或缺的功能。前端需要寫一些 JavaScript 程式碼來實作登入功能，以下就來談談如何使用 JavaScript 實作登入功能。
首先，我們需要了解 HTTP 協定中的 cookie 和 session，這二者是實作登入功能的重要概念。當使用者提交登入要求時，伺服器會驗證使用者提交的帳號密碼是否正確，如果正確則將使用者資訊儲存到session 中，並在回應頭中將session id 儲存到客戶端的cookie 中，以便下次請求時伺服器可以透過session id 找到使用者的資訊。登入成功後，用戶端可以根據 cookie 中的 session id 判斷使用者是否登入，從而實現狀態保持。
有了這個基礎知識，我們就可以開始實作登入功能了。
首先，我們需要在 HTML 中建立一個登入表單，表單中包含帳號和密碼兩個輸入框，還有一個登入按鈕。
<form id="login-form"> <label for="username">账号：</label> <input type="text" id="username" name="username"> <br> <label for="password">密码：</label> <input type="password" id="password" name="password"> <br> <button type="submit">登录</button> </form>
在表單中，我們為每個輸入框指定了 id，以方便 JavaScript 取得輸入框中的值。
我們需要監聽表單的提交事件，並在提交事件中處理登入的邏輯。
const form = document.querySelector('#login-form');
form.addEventListener('submit', handleLogin);
function handleLogin(event) {
event.preventDefault(); // 阻止表单默认提交事件
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
// TODO: 验证账号密码是否正确
// TODO: 发送登录请求
}首先透過document.querySelector 方法取得表單中的帳號和密碼輸入框的值，然後可以對帳號密碼進行驗證，可以自行編寫驗證邏輯，也可以使用第三方庫進行驗證。
如果帳號密碼驗證通過，則可以傳送登入要求。發送請求需要使用 XMLHttpRequest 對象，後面的範例中將使用 fetch API。
const form = document.querySelector('#login-form');
form.addEventListener('submit', handleLogin);
function handleLogin(event) {
event.preventDefault(); // 阻止表单默认提交事件
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
// TODO: 验证账号密码是否正确
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('登录成功');
// TODO: 保存用户信息到 session
// TODO: 跳转到首页
} else {
alert('登录失败，账号或密码错误');
}
})
.catch(error => {
console.error(error);
alert('登录失败，网络异常');
});
}在傳送請求時，需要將帳號密碼封裝成 JSON 物件作為請求體，然後在請求頭中指定 Content-Type 為 application/json。伺服器傳回的資料是一個 JSON 對象，其中包含一個 success 欄位表示登入是否成功。如果登入成功，則可以將使用者資訊儲存到 session 中，並跳到首頁；如果登入失敗，則彈出錯誤提示。
在登入成功後，伺服器需要將使用者資訊儲存到 session 中。可以使用 fetch API 發送另一個請求，在請求中設定 credentials 為 include，以便在發送請求時自動攜帶 cookie，從而在服務端可以透過 cookie 中的 session id 來存取對應的 session。
fetch('/api/user', {
credentials: 'include'
})
.then(response => response.json())
.then(data => {
// TODO: 将用户信息保存到 session
})
.catch(error => {
console.error(error);
alert('获取用户信息失败');
});在服務端，可以使用 express-session 中間件來處理 session。登入成功後，將使用者資訊儲存到session 中：
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
// TODO: 验证账号密码是否正确
// TODO: 将用户信息保存到 session
req.session.user = { id: 1, username: 'admin' };
res.json({ success: true });
});在取得使用者資訊時，可以透過req.session.user 來取得登入的使用者資訊：
app.get('/api/user', (req, res) => {
res.json(req.session.user);
});登入成功後，還需要將頁面跳到首頁。可以使用 JavaScript 來實現頁面跳躍。
if (data.success) {
alert('登录成功');
// TODO: 保存用户信息到 session
window.location.href = '/'; // 跳转到首页
} else {
alert('登录失败，账号或密码错误');
}在跳到頁面時，可以使用 window.location.href 屬性來設定頁面的 URL，從而實現頁面跳躍。
總結：
本文介紹如何使用 JavaScript 實作登入功能。實現登入需要處理多個方面，包括驗證帳號密碼、發送請求、保存使用者資訊到 session、頁面跳轉等等。透過本文的介紹，相信讀者可以快速掌握前端實現登入功能的方法。
以上是如何使用 JavaScript 實作登入功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
