728x90
반응형
2024.03.19
로그인 화면 개발을 진행 중이다. 기존 자바를 기준으로 프론트 쪽만 리뉴얼하는 작업이다.
자바에서 HttpServeletRequest 를 통해 세션 관리를 하고 있어 그거에 맞춰 개발 진행 중에 있다.
1. 정의
- HttpServletRequest는 서블릿 컨테이너가 HTTP 요청을 처리하기 위해 서블릿에게 제공하는 객체이다.
- 클라이언트에서 서버로 요청을 보낼 때마다 서블릿 컨테이너는 HttpServletRequest 객체를 생성하여 해당 요청에 대한 모든 정보를 담아 서블릿에 전달하며, 이 객체를 통해 HTTP 요청에 대한 다양한 정보를 읽고, 수정하고, 응답을 생성할 수 있다.
2. HttpServletRequest 객체의 주요 기능과 속성
- 요청 메소드(Method): HTTP 요청 메서드(GET, POST, PUT, DELETE 등)를 확인할 수 있다.
- 헤더(Header): HTTP 요청 헤더의 정보를 확인할 수 있다.
- 파라미터(Parameter): HTTP 요청의 쿼리 문자열이나 폼 데이터를 확인할 수 있다.
- 세션(Session): 현재 요청과 관련된 세션 객체를 얻을 수 있다.
- 속성(Attribute): 요청에 대한 사용자 지정 속성을 설정하고 읽을 수 있다.
- 인증(Authentication): 요청의 사용자 인증 정보를 확인할 수 있다.
- 파일 업로드(File Upload): 멀티파트 요청으로부터 파일 업로드를 처리할 수 있다.
3. 예제 소스:
Vue.js를 사용하여 클라이언트 측에서 로그인 기능을 구현하고, 서버 측에서는 Java Servlet의 HttpServletRequest를 사용하여 간단한 로그인 기능을 처리하는 예제 코드
- login.html (Vue.js 확장자)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<!-- Vue.js CDN 추가 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<h1>Login</h1>
<!-- 입력 폼 -->
<form @submit.prevent="login">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit">Login</button>
<!-- 에러 메시지 표시 -->
<p v-if="error" style="color: red;">{{ error }}</p>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
error: ''
},
methods: {
login() {
// 사용자 이름과 비밀번호를 서버에 전송하여 로그인 요청 처리
fetch('http://localhost:8080/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.username,
password: this.password
})
})
.then(response => {
if (response.ok) {
// 로그인 성공 시 홈페이지로 리다이렉트 또는 성공 메시지 표시 등의 작업 수행
alert('Login successful!');
} else {
// 로그인 실패 시 에러 메시지 표시
this.error = 'Invalid username or password.';
}
})
.catch(error => {
console.error('Error:', error);
});
}
}
});
</script>
</body>
</html>
- LoginServlet.java (Java Servlet)
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
private static final String VALID_USERNAME = "user";
private static final String VALID_PASSWORD = "password";
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// HTTP 요청으로부터 받은 JSON 데이터 파싱
String requestBody = request.getReader().lines().reduce("", (accumulator, actual) -> accumulator + actual);
String[] credentials = requestBody.split(",");
String username = credentials[0].split(":")[1].replaceAll("\"", "").trim();
String password = credentials[1].split(":")[1].replaceAll("\"", "").trim();
// 사용자가 입력한 사용자 이름과 비밀번호가 유효한지 확인
if (isValidCredentials(username, password)) {
// 로그인 성공 시 성공 응답 보내기
response.setStatus(HttpServletResponse.SC_OK);
} else {
// 로그인 실패 시 실패 응답 보내기
response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
}
}
private boolean isValidCredentials(String username, String password) {
return VALID_USERNAME.equals(username) && VALID_PASSWORD.equals(password);
}
}- 이 예제에서는 클라이언트 측에서 Vue.js를 사용하여 로그인 폼을 만들었고, 사용자가 입력한 사용자 이름과 비밀번호를 JSON 형식으로 서버에 POST 요청으로 전송다. 서버는 Java Servlet에서 해당 요청을 받아 사용자 이름과 비밀번호를 확인하여 로그인을 처리
728x90
반응형
'개발일기' 카테고리의 다른 글
| 12. npm과 npx의 차이 (0) | 2025.05.08 |
|---|---|
| 10. Vuex Store (24) | 2024.03.18 |
| 09. Vue.js의 라이프사이클 (26) | 2024.03.17 |
| 08. 리액트(React) (63) | 2024.01.25 |
| 07. DOM(Document Object Model) (63) | 2024.01.23 |
