JavaScript를 사용하여 로그인 기능을 구현하는 방법

프론트엔드와 백엔드가 분리된 프로젝트에서 로그인 기능은 필수적인 기능입니다. 프런트 엔드에서는 로그인 기능을 구현하기 위해 JavaScript 코드를 작성해야 합니다. JavaScript를 사용하여 로그인 기능을 구현하는 방법에 대해 이야기해 보겠습니다.

먼저 HTTP 프로토콜의 쿠키와 세션을 이해해야 합니다. 이 두 가지는 로그인 기능을 구현하는 데 중요한 개념입니다. 사용자가 로그인 요청을 제출하면 서버는 사용자가 제출한 계정과 비밀번호가 올바른지 확인합니다. 올바른 경우 사용자 정보는 세션에 저장되고 세션 ID는 클라이언트의 쿠키에 저장됩니다. 서버가 다음에 요청할 수 있도록 응답 헤더를 세션 ID로 확인할 수 있습니다. 클라이언트는 로그인 성공 후 쿠키에 포함된 세션 ID를 기반으로 사용자의 로그인 여부를 판단하여 상태를 유지할 수 있습니다.

이 기본 지식을 바탕으로 로그인 기능 구현을 시작할 수 있습니다.

1. 로그인 양식 만들기

먼저 HTML로 로그인 양식을 만들어야 합니다. 이 양식에는 계정 번호와 비밀번호를 입력하는 두 개의 입력 상자와 로그인 버튼이 있습니다.

 账号：  
 密码：  
 登录 

양식에서는 JavaScript가 입력 상자의 값을 쉽게 얻을 수 있도록 각 입력 상자에 ID를 할당합니다.

2. 양식 제출 이벤트 듣기

양식 제출 이벤트를 듣고 제출 이벤트에서 로그인 로직을 처리해야 합니다.

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메소드를 통해 양식에 있는 계정 및 비밀번호 입력 상자의 값을 가져온 다음 계정 비밀번호를 직접 작성할 수도 있고, 인증할 수도 있습니다. 확인을 위해 타사 라이브러리를 사용하십시오.document.querySelector方法获取表单中的账号和密码输入框的值，然后可以对账号密码进行验证，可以自己编写验证逻辑，也可以使用第三方库进行验证。

3. 发送登录请求

如果账号密码验证通过，则可以发送登录请求。发送请求需要使用 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 中，并跳转到首页；如果登录失败，则弹出错误提示。

4. 保存用户信息到 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); });

5. 页面跳转

在登录成功后，还需要将页面跳转到首页。可以使用 JavaScript 来实现页面跳转。

if (data.success) { alert('登录成功'); // TODO: 保存用户信息到 session window.location.href = '/'; // 跳转到首页 } else { alert('登录失败，账号或密码错误'); }

在跳转页面时，可以使用window.location.href

로그인 요청 보내기

계정 비밀번호 확인이 통과되면 로그인 요청을 보낼 수 있습니다. 요청을 보내려면 XMLHttpRequest 객체를 사용해야 하며, 다음 예제에서는 fetch API를 사용합니다.

rrreee요청을 보낼 때 계정 비밀번호를 JSON 개체에 요청 본문으로 캡슐화한 다음 요청 헤더에 Content-Type을 application/json으로 지정해야 합니다. 서버에서 반환되는 데이터는 로그인 성공 여부를 나타내는 성공 필드를 포함하는 JSON 개체입니다. 로그인에 성공하면 사용자 정보가 세션에 저장되고 홈페이지로 이동할 수 있으며, 로그인에 실패하면 오류 메시지가 나타납니다.
세션에 사용자 정보 저장로그인 성공 후 서버는 사용자 정보를 세션에 저장해야 합니다. Fetch API를 사용하여 또 다른 요청을 보낼 수 있고, 요청을 보낼 때 쿠키가 자동으로 전달되도록 요청에 포함할 자격 증명을 설정할 수 있으며, 쿠키에 있는 세션 ID를 통해 서버 측에서 해당 세션에 접근할 수 있습니다. . rrreee서버 측에서는 express-session 미들웨어를 사용하여 세션을 처리할 수 있습니다. 로그인 성공 후 사용자 정보를 세션에 저장합니다: rrreee 사용자 정보를 얻을 때 req.session.user를 통해 로그인된 사용자 정보를 얻을 수 있습니다: rrreee
페이지 점프 로그인에 성공한 후에도 홈 페이지로 이동해야 합니다. JavaScript를 사용하여 페이지로 이동할 수 있습니다. rrreee페이지로 이동할 때 window.location.href속성을 사용하여 페이지 URL을 설정하여 페이지 점프를 달성할 수 있습니다. 요약: 이 글에서는 JavaScript를 사용하여 로그인 기능을 구현하는 방법을 소개합니다. 로그인을 구현하려면 계정 및 비밀번호 확인, 요청 전송, 세션에 사용자 정보 저장, 페이지 이동 등 다양한 측면을 처리해야 합니다. 이 글의 소개를 통해 독자들은 프런트 엔드에서 로그인 기능을 구현하는 방법을 빠르게 익힐 수 있을 것이라고 믿습니다.

위 내용은 JavaScript를 사용하여 로그인 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!