[ Spring ] 로그인 / 로그아웃 처리

 

회원 로그아웃처리

 

1. 저장되어 있는 세션을 가져와서  무효화 해준다.

📑 MemberController.java

@RequestMapping("/memLogout.do")
public String memLogout(HttpSession session) {
    session.invalidate();
    return "redirect:/";
}

1) 파라미터로 세션을 가져온다.

2) session.invalidate() 세션을 무효화해준 뒤 다시 메인페이지로 이동 한다.

3) 화면이 다시 로그인이 필요한 상태로 변경된다.

 

 

 

2. Header  로그인, 로그아웃 상태 확인 되는 부분

📑 header.jsp

- empty 빈값인지 있는지 확인해준다.

<c:if test="${empty mvo}">
      <ul class="nav navbar-nav navbar-right">
            <li><a href="${contextPath}/memLoginForm.do"><span class="glyphicon glyphicon-log-in"></span> 로그인</a></li>
            <li><a href="${contextPath}/memJoin.do"><span class="glyphicon glyphicon-user"></span> 회원가입</a></li>            
      </ul>
</c:if>

1) 빈값일시 헤더 마크업 : 로그인 노출

<c:if test="${ empty mvo }">

 

 <c:if test="${!empty mvo}">
      <ul class="nav navbar-nav navbar-right">
            <li><a href="${contextPath}/memUpdateForm.do"><span class="glyphicon glyphicon glyphicon-wrench"></span> 회원정보수정</a></li>
            <li><a href="${contextPath}/memImageForm.do"><span class="glyphicon glyphicon glyphicon-picture"></span> 사진등록</a></li>
            <li><a href="${contextPath}/memLogout.do"><span class="glyphicon glyphicon-log-out"></span> 로그아웃</a></li>            
            <c:if test="${!empty mvo}">
            <c:if test="${mvo.memProfile eq ''}">
              <li><img class="img-circle" src="${contextPath}/resources/images/person.PNG" style="width: 50px; height: 50px"/> ${mvo.memName} 님Welcome.</li>
            </c:if>
            <c:if test="${mvo.memProfile ne ''}">
              <li><img class="img-circle" src="${contextPath}/resources/upload/${mvo.memProfile}" style="width: 50px; height: 50px"/> ${mvo.memName} 님Welcome.</li>
            </c:if>			  
          </c:if>
      </ul>
  </c:if>

2) 값이 있을시 마크업 :  로그아웃 노출

<c:if test="${! empty mvo }">

 

 

 

---

 

로그인 처리 

 

1. 로그인 화면으로 이동

📑 MemberController.java

@RequestMapping("/memLoginForm.do")
public String memLoginForm() {
    return "member/memLoginForm"; // memLoginForm.jsp
}

 

📑 memLoginForm.jsp

<form action="${contextPath}/memLogin.do" method="post">
     <table class="table table-bordered" style="text-align: center; border: 1px solid #dddddd;">
       <tr>
         <td style="width: 110px; vertical-align: middle;">아이디</td>
         <td><input id="memID" name="memID" class="form-control" type="text" maxlength="20" placeholder="아이디를 입력하세요."/></td>
       </tr>
       <tr>
         <td style="width: 110px; vertical-align: middle;">비밀번호</td>
         <td colspan="2"><input id="memPassword" name="memPassword" class="form-control" type="password" maxlength="20" placeholder="비밀번호를 입력하세요."/></td>            
       </tr>      
       <tr>
         <td colspan="2" style="text-align: left;">
            <input type="submit" class="btn btn-primary btn-sm pull-right" value="로그인"/>
         </td>             
       </tr>
     </table>
</form>

 

 

2. 로그인 전달

📑 MemberController.java

@RequestMapping("/mamLogin.do")
public String memLogin(Member m, RedirectAttributes rttr,HttpSession session){
	if(m.getMemID()==null ||m.getMemID.equals("")||
    m.getMemPassword()==null ||m.getMemPassword.equals("")){
    	rttr.addFlashAttribute("msgType","실패 메시지")
        rttr.addFlashAttribute("msgType","모든 내용을 입력해주세요.")
        return "redirect:/mamLogin.do"
    }
   
   // SQL 실행
   Member mvo=memberMapper.memLogin(m);
    if(mvo!=null) { // 로그인에 성공
       rttr.addFlashAttribute("msgType", "성공 메세지");
       rttr.addFlashAttribute("msg", "로그인에 성공했습니다.");
       session.setAttribute("mvo", mvo); // ${!empty mvo}
       return "redirect:/";	 // 메인		
    }else { // 로그인에 실패
       rttr.addFlashAttribute("msgType", "실패 메세지");
       rttr.addFlashAttribute("msg", "다시 로그인 해주세요.");
       return "redirect:/memLoginForm.do";
    }	
    
    return
    
}

1) 로그인 정보 입력을 다 하지 않았을경우, 모달 창에 실패 메시지 전달

2) 로그인 성공 및 실패 시, 모달 창에 메시지전달

 

 

📑 MemberMappre.java

public Member memLogin(Member vo);

📑 MemberMappre.xml

<select id="memLogin" parameterType="kr.board.entity.Member" 
                    resultType="kr.board.entity.Member">
 select * from mem_tbl 
 where memID=#{memID} and memPassword=#{memPassword}
</select>

1) parameterType : 들어온 파라미터 타입 

2) resultType : 결과를 묶어서 다시 전달 할 타입.

 

 

 

3. 로그인 성공 및 실패 시 모달창 

📑 memLoginForm.jsp

 

- javascript

$(document).ready(function(){
if(${!empty msgType}){
    $("#messageType").attr("class", "modal-content panel-warning");    
    $("#myMessage").modal("show");
}
});

 

- html

<div id="myMessage" class="modal fade" role="dialog" >
  <div class="modal-dialog">	
    <!-- Modal content-->
    <div id="messageType" class="modal-content panel-info">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">${msgType}</h4>
      </div>
      <div class="modal-body">
        <p>${msg}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>	
  </div>
</div>

 

 

📑 header.jsp

- empty  값이 들어가 로그인 성공시 회원만 접속이 가능한 메뉴가 노출된다.

<c:if test="${!empty mvo}">
  <ul class="nav navbar-nav navbar-right">
        <li><a href="${contextPath}/memUpdateForm.do"><span class="glyphicon glyphicon glyphicon-wrench"></span> 회원정보수정</a></li>
        <li><a href="${contextPath}/memImageForm.do"><span class="glyphicon glyphicon glyphicon-picture"></span> 사진등록</a></li>
        <li><a href="${contextPath}/memLogout.do"><span class="glyphicon glyphicon-log-out"></span> 로그아웃</a></li>            
        <c:if test="${!empty mvo}">
        <c:if test="${mvo.memProfile eq ''}">
          <li><img class="img-circle" src="${contextPath}/resources/images/person.PNG" style="width: 50px; height: 50px"/> ${mvo.memName} 님Welcome.</li>
        </c:if>
        <c:if test="${mvo.memProfile ne ''}">
          <li><img class="img-circle" src="${contextPath}/resources/upload/${mvo.memProfile}" style="width: 50px; height: 50px"/> ${mvo.memName} 님Welcome.</li>
        </c:if>			  
      </c:if>
  </ul>
</c:if>