SpringBoot로 Web만들기(3)

HappyHouse 만들기 - 로그인/로그아웃

 

1. index.html에 적당한 곳에 로그인 ID / PW 를 입력할 곳을 만들어준다.

<div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                    	<div id="loginDiv" style='color:white; font-size:17px; margin-right:35px'>ID<input id="id">
                    	PW<input id="pw">
                    	<button class="btn btn-outline-light" id="loginBtn">로그인</button>

 

2. my.js에 로그인을 요청을 보낼 이벤트를 만들어준다.

$("#loginBtn").click(function(){
		const id = $("#id").val();
		const pw = $("#pw").val();
		
		$.post('login', {id, pw}, function(data){
			if(data == "ok"){
				alert("로그인성공!");
				$("#loginDiv").html(id +"님 환영합니다.");
			}
			else{
				alert("로그인 실패!");
			}
		});

3. MemberController에 login기능 추가

@PostMapping("login")
	public String login(HttpServletRequest request, HttpServletResponse response) {
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		MemberVO vo = new MemberVO(id, pw, "");
		String name = memberService.login(vo);
		if(name!=null) {
			HttpSession session = request.getSession();
			session.setAttribute("member", vo);
			return "ok";
		}
		else {
			return "fail";
		}
	}

4. MemberService에 login 메서드 추가

public String login(MemberVO vo) {
		return memberDAO.login(vo);		
	}

5. MemberDAO에 login 메서드 추가

6. mybatis/mappers/member.xml에 login sql 추가

<select id="login" parameterType="memberVO" resultType="String">
  		select name from member where id=#{id} and pw=#{pw}
  	</select>

7. 결과 확인

 

---

8. 로그아웃 기능을 만들기 위해 my.js에 로그아웃 버튼 생성 / 로그아웃 버튼 기능을 만들어준다.

$("#loginBtn").click(function(){
		const id = $("#id").val();
		const pw = $("#pw").val();
		
		$.post('login', {id, pw}, function(data){
			if(data == "ok"){
				alert("로그인성공!");
				
				$("#loginDiv").html(id +"님 환영합니다. <input type='button' value='logout' id='logoutBtn' class='btn btn-outline-light'>");
				$.cookie("logined", id);
			}
			else{
				alert("로그인 실패!");
			}
		});
	});

- 동적생성되는 logout버튼 이벤트 처리

$(document).on("click", "#logoutBtn", function(){
	$.post("logout",{},function(data){
		$.removeCookie("logined");
        alert("로그아웃 되었습니다.");
		location.reload();
	});
});

9. 로그아웃 기능을 처리하기 위한 MemberController에 logout기능을 추가한다.

@PostMapping("logout")
	public String logout(HttpServletRequest request, HttpServletResponse response) {
		HttpSession session = request.getSession(false);
		session.invalidate();
		return "";
	}

10. 결과 확인