🔓이번엔 로그아웃을 해보자!

board.jsp 수정

찾기를 사용하여(윈도우, intellij 기준 CTRL+F) logout modal안에 있는 logout을 찾아 다음과 같이 수정합니다. 그리고 스크립트를 추가합니다.

<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                	<span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
            	Select "Logout" below if you are ready to end your current session.
	    </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">
                	Cancel
                </button>
                <a class="btn btn-primary" id="logout">
                	Logout
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    $("#logout").click(function (){
        $.ajax({
            type:'POST',
            url:'/logout',
            success: function () {
                location.href='/'
            }
        })
    })
</script>

logout 버튼이 클릭되면 POST로 /logout에 요청을 보내고, 요청이 성공하면 로그인 페이지로 이동합니다.

LoginController 수정

로그아웃 요청이 오면 session을 해제하여 로그아웃을 수행합니다.

@PostMapping("/logout")
public void logout(HttpSession session){
	session.invalidate();
}

테스트

로그아웃 후 /board로 요청을 보내면

세션이 없어 거부당하는 것을 확인할 수 있습니다.