스프링(spring)/ 회원 시스템 구축 2(로그인 페이지)

Programming/스프링(spring) - Enterprise

스프링(spring)/ 회원 시스템 구축 2(로그인 페이지)

esoog Polaris 2023. 8. 1. 18:39

0. 로그인은 생각해보면 정보일치와 세션에 관해서 만져주면 될 것 같은 느낌이 든다.

먼저, account폴더에 login.jsp파일을 생성후, home.jsp에 로그인 링크를 하나 건다.

<a href="/account/login">로그인</a>

1. 먼저 세션(사용자 상태 유지 기능)을 사용해야 하기에

UserColtroller 파일부터 정리.

우선, 아래 기능들을 상단에 임포트 시킨다.

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

*import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

위 두 녀석은 사용자 정보와 세션 관련 데이터를 다룰 때, 사용.

*import org.springframework.web.servlet.mvc.support.RedirectAttributes;

리다이렉트를 수행하면서 커스텀 데이터를 전달할 때 사용되고,

비슷하게 느껴지는

@ResponseBody: 컨트롤러 메서드가 JSON 등의 데이터를 직접 응답 본문에 넣어주는 경우

그리고 회원가입 로직 하단에 아래 코드를 추가.

@GetMapping("/account/login")
public void getLogin() throws Exception{
}

@PostMapping("/account/login")
public String login(UserVO vo, HttpServletRequest req, RedirectAttributes rttr) throws Exception{

    HttpSession session = req.getSession();
    UserVO login = userService.login(vo);

    if(login == null) {
        rttr.addFlashAttribute("msg", "아이디와 비밀번호를 확인해주세요.");
        return "redirect:/account/login"; // 리다이렉트하여 로그인 페이지로 돌아감
    }else {
        session.setAttribute("member", login);
    }

    return "redirect:/";
}

@PostMapping("/logout")
public String logout(HttpSession session) throws Exception{

    session.invalidate();

    return "redirect:/";
}

* 용법을 그렇구나 하면서 눈에 익히면 족하다.

session.setAttribute("member", login); 은 member라는 이름으로 login객체를 저장한다는 의미다.

이 세션은 사용자 브라우저와 서버 사이에서 유지된다.

req와 rttr이 어떤 기능으로 쓰이는지 확인이 가능하다.

session.invalidate();로 인해 세션을 무효화 시킨다.

2. 돌아와서 지나쳤던 login.jsp(V)파일을 건드려 준다.

아래 코드를 추가한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>
<head>
	<title>Home</title>
		<!-- 합쳐지고 최소화된 최신 CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<!-- 부가적인 테마 -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
</head>

<body>
	<form name='login' method="post" >
		<c:if test="${member == null}">
		<!-- member는 컨트롤러 메서드로 실행 후 세션 객체로 받은 이름이다. -->
			<div>
				<label for="id"></label>
				<input type="text" id="id" name="id" required>
			</div>
			<div>
				<label for="pwd"></label>
				<input type="password" id="pwd" name="pwd" required>
			</div>
			<div>
				<button type="submit">로그인</button>
			</div>
		</c:if>
		<c:if test="${member != null }">
			<div>
				<p>${member.id}님 환영 합니다.</p>
				<button id="logoutBtn" type="button">로그아웃</button>
			</div>
		</c:if>
		<c:if test="${msg == false}">
			<p style="color: red;">로그인 실패! 아이디와 비밀번호 확인해주세요.</p>
		</c:if>
	</form>
	
	<script type="text/javascript">
		$(document).ready(function(){
		    $("#logoutBtn").on("click", function(){
		        // 로그아웃 버튼 클릭 시 /logout 경로로 POST 요청을 보냄
		        $.post("/logout", function(data) {
		            // 로그아웃 성공 시 홈으로 리다이렉트
		            location.href = "/";
		        }).fail(function() {
		            // 로그아웃 실패 시 에러 메시지를 표시할 수 있음
		            alert("로그아웃 실패!");
		        });
		    });
		});
	</script>
</body>
</html>

*member라는 객체에는 id와 pwd가 들어있다.

3. 그리고 데이터베이스를 사용해서 로그인 기능을 쓸테니 매퍼!

아래 코드를 추가한다.

<!-- 로그인 -->
<select id="login" resultType="com.project.model.UserVO">
	SELECT id, pwd 
		FROM *
		WHERE id = #{id}
		AND pwd = #{pwd}   
</select>

*아이디와 패스워드가 일치하는게 있으면 셀렉트.

4. 다음으로는 역시나 DAO와 Service 파일에 코드 추가

UserDAO와 UserService에 아래 코드 추가하고,

public UserVO login(UserVO vo) throws Exception;

UserDAOImpl에는 아래코드 추가

    // 로그인
    @Override
    public UserVO login(UserVO vo) throws Exception {
        return sqlSession.selectOne(namespace + ".login", vo);
    }

UserServiceImpl에는 아래 코드 추가

	@Override
	public UserVO login(UserVO vo) throws Exception {
		return userDAO.login(vo);
	}

5. 마지막으로 세션이 유지되는 기능을 활용해서 메인 홈 화면에 로그인 정보 띄워보기

home.jsp파일에 아래 코드 추가 수정(애매해서 전체 수정)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!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.0">
	<link rel="stylesheet" href="../../resources/home.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<title>Document</title>
</head>
<body>
<c:set var="member" value="${sessionScope.member}" />
<c:if test="${not empty member}">
    <p>${member.id}님 환영 합니다.</p>
    <button id="logoutBtn" type="button">로그아웃</button>
</c:if>

<P>  server time is ${serverTime}. </P>

<a href="/board/list">게시물 목록</a>
<a href="/board/write">게시물 작성</a>
<a href="/board/search">게시물 검색</a>
<a href="/account/join">회원가입</a>
<a href="/account/login">로그인</a>

<script type="text/javascript">
	
	$(document).ready(function(){
	    $("#logoutBtn").on("click", function(){
	        // 로그아웃 버튼 클릭 시 /account/logout 경로로 POST 요청을 보냄
	        $.post("/logout", function(data) {
	            // 로그아웃 성공 시 홈으로 리다이렉트
	            location.href = "/";
	        }).fail(function() {
	            // 로그아웃 실패 시 에러 메시지를 표시할 수 있음
	            alert("로그아웃 실패!");
	        });
	    });
	});

</script>

</body>
</html>

*jquery쓰는 부분 임포트

그리고 login 페이지 로그인 됐을 때, 로직 추가.

똑같이 로그아웃 자바스크립트로 기능 구현.

확인. 나이스.

728x90

저작자표시 비영리 변경금지

'Programming > 스프링(spring) - Enterprise' 카테고리의 다른 글

스프링(spring)/ 회원 시스템 구축 4(암호화) (0)	2023.08.02
스프링(spring)/ 회원 시스템 구축 3(회원정보 수정 및 탈퇴) (0)	2023.08.01
스프링(spring)/ 회원 시스템 구축 1(회원가입 페이지) (0)	2023.08.01
스프링(spring)/ 게시판 구축 5(좋아요 기능) (0)	2023.07.21
스프링(spring)/ 게시판 구축 4(검색 기능) (0)	2023.07.20

현재글스프링(spring)/ 회원 시스템 구축 2(로그인 페이지)

Blue Whale Wave