Spring으로 Web프로젝트만들기(3)

로그인

1. 로그인 양식을 index.html에 적절히 추가하기

<div class="navbar-brand" href="#">
      	<div id="msgDiv">
      		ID<input size="5" id="id">
      		PW<input size="5" id="pw" type="password">
      		<input type="button" id="loginBtn" value="login">
      	</div>
      </div>

2. index.html 에서 my.js 를 참조하도록 적절한 위치에 아래 내용 삽입

  <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <script type="text/javascript" src="js/my.js"></script>

3. my.js에 다음 내용 추가

$(document).ready(function(){
	$("#loginBtn").click(function(){//로그인 처리	
		
		var id=$("#id").val();
		var pw=$("#pw").val();
		
		//alert(id+":"+pw);		
		
		$.post("login.jes",
			  {			   
			    id:id,
			    pw:pw
			  },
			  function(data, status){	
			  	//alert(data);		    
				$("#msgDiv").html(data);						   
			  }
		);//end post() 
	});//end 로그인 처리

	...
	

});

4. HomeController에 메소드 추가

@RequestMapping(value = "login.jes", 
			method= {RequestMethod.POST},
			produces = "application/text; charset=utf8")			
	@ResponseBody
	public String login(HttpServletRequest request,
			HttpServletResponse response){
		String id=request.getParameter("id");
		String pw=request.getParameter("pw");		
		
		try {
			MemberVO m=new MemberVO(id,pw); 
			String name=memberService.login(m);
			if(name!=null) {
				HttpSession session=request.getSession();
				session.setAttribute("member", m);
				return id+"님 접속중";
			}else {
				return "로그인 실패";
			}
		}catch(Exception e) {
			return e.getMessage();
		}		
	}

5. MemberService와 MemberDAO에 메소드 추가

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

/*------------------------------------------------*/

public String login(MemberVO m) {
		return sqlSession.selectOne("mapper.member.login",m);		
	}

6. 결과확인

새로고침하였을 때 로그인 정보가 남아있게 하기

7. index.html에 아래 코드 삽입

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){

var login=$.cookie('logined');
$("#msgDiv").html(login);
});
</script>

---

로그아웃

1. 로그인 후에는 로그아웃 버튼이 보이도록 my.js 수정

data += "<input type='button' value='logout' id='logoutBtn' class='btn btn-primary'>";

2. 로그아웃 버튼을 누를 때 이벤트 처리하기

$(document).on("click", "#logoutBtn", function(event) { //로그아웃 처리
	
		$.post("logout.jes",
			  {			   
			   
			  },
			  function(data, status){		  	
			  	
			  	$.removeCookie("logined");	    
				location.reload();						   
			  }
		);//end post()

3. HomeController에 로그아웃 처리 메소드 추가

@RequestMapping(value = "logout.jes", 
			method= {RequestMethod.POST},
			produces = "application/text; charset=utf8")			
	@ResponseBody
	public String logout(HttpServletRequest request,
			HttpServletResponse response){
		
			HttpSession session=request.getSession(false);
			session.invalidate();
			return "";
		
	}

4. 로그인실패일때도 보이기때문에 문제 해결을 위한 json 데이터 리턴을 해야한다. 이를 위해 pom.xml에 아래 내용 추가

<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
<dependency>
    <groupId>com.googlecode.json-simple</groupId>
    <artifactId>json-simple</artifactId>
    <version>1.1.1</version>
</dependency>

5. HomeController 메소드 수정

@RequestMapping(value = "login.jes", 
			method= {RequestMethod.POST},
			produces = "application/text; charset=utf8")			
	@ResponseBody
	public String login(HttpServletRequest request,
			HttpServletResponse response){
		String id=request.getParameter("id");
		String pw=request.getParameter("pw");		
		
		JSONObject json=new JSONObject();
		try {
			MemberVO m=new MemberVO(id,pw); 
			String name=memberService.login(m);
			
			if(name!=null) {
				HttpSession session=request.getSession();
				session.setAttribute("member", m);
				
				json.put("name", name);
				
			}else {
				json.put("msg", "로그인 실패");
			}
		}catch(Exception e) {
			json.put("msg", e.getMessage());
		}	
		return json.toJSONString();
	}

6. my.js  수정

$("#loginBtn").click(function(){//로그인 처리	
		
		var id=$("#id").val();
		var pw=$("#pw").val();
		
		//alert(id+":"+pw);		
		
		$.post("login.jes",
			  {			   
			    id:id,
			    pw:pw
			  },
			  function(data, status){	
			  var obj=JSON.parse(data);			  
			  	if(obj.name){
			  		data = obj.name+"<input type='button' value='logout' id='logoutBtn' class='btn btn-primary'>";	
			  		$.cookie("logined",data);	    
					$("#msgDiv").html(data );		
				}else{
					alert(obj.msg);
					location.reload();	
				}				   
			  }//end function
		);//end post() 
	});//end 로그인 처리

7. 결과확인