[블로그 만들기] DB 활용하기 - 로그인, 로그아웃

2021.07.02 - [Spring] - DB 데이터 활용하기 - 회원가입

위 게시물과 이어집니다.

loginForm.jsp에 include를 통해서 header.jsp 가 실행되도록 해줍니다.

footer.jsp도 마지막줄에 마찬가지로 넣어줍니다.

 

regist.jsp에서 사용했던 div태그와 form 태그를 복사해 가져와 수정해줍니다.

action과 method를 통해서 어디로, 어떻게 갈지 지정해줍니다.

UserRepository 클래스에 로그인 기능을 하는 메서드도 만들어줍니다.

하지만 이렇게 하게 되면 로그인을 성공했을 때 성공하기 전과 후의 홈화면이 달라지는게 없습니다.

로그인 했을 때 session에 저장해주기 위해 HttpSession을 DI 해줍니다.

함수의 반환타입 앞에 @ResponseBody annotation을 달아줌으로써 해당 매서드만 @RestController가 적용됩니다.

로그인 실패 시 userEntity가 null이므로 LoginFail이라는 메시지 보여주는 창을 띄워주고 history.back()메서드를 사용해서 이전 페이지로 이동해줍니다. @RestController에서 return 값에 소스코드가 있으면 실행시켜준 값을 반환해주므로 코드들을 StringBuilder로 이어붙여준 값을 String으로 변환시켜주어 return 해줍니다.

로그인에 성공했을 때는 userEntity의 값을 principal 이라는 이름으로 session에 올려주고 홈화면으로 이동하는 코드를 이어붙여줍니다. 그리고 이어붙여진 코드를 String 타입으로 변환시켜 return 시켜주면 홈 화면으로 이동하게 됩니다.

 

그런데 실패시 메시지 창을 띄워준다거나 다른 페이지로 이동시켜주는 기능은 다른 곳에서도 쓰일 가능성이 있기 때문에 따로 클래스르 만들어서 재사용함수로 만들어주도록 합니다. 

 

dpapp 아래 util이라는 패키지를 하나 만들어서 Script라는 클래스를 하나 생성해줍니다.

먼저 메세지창을 띄우고 바로 이전화면으로 가는 메서드를 만들어줍니다. 

띄워줄 메시지를 매개변수로 받아 LoginFail 메시지 부분에 변수로 넣어준면 끝입니다.

 

다른 페이지로 이동하는 메서드에도 이동할 페이지의 uri를 매개변수로 받아서 uri부분에 변수로 넣어주면 끝입니다.

그럼 다시 UserRepository로 가서 수정해줍니다.

 

이렇게 함수를 재사용해주면 코드도 훨씬 깔끔해집니다.

 

그럼 이제 홈화면에서 로그인 성공 시 이전과 다르게 보이도록 설정해줍니다.

따라서 header.jsp 로 가서 로그인 성공 / 실패에 따라 다르게 보여주도록 설정을 해줍니다.

jstl을 입력할 건데 tomcat은 jstl라이브러리를 추가했어도 인식하지 못합니다. 따라서 인식할 수 있도록 설정해줍니다.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

상단에 jstl 코드를 인식할 수 있도록 해주고

if-else와 비슷한 기능을 해주는 태그들을 추가해줍니다.

<c:when test="${empty sessionScope.principal}">

 이 태그의 'test'는 바꾸면 안됩니다. 

test 값으로는 조건식을 적어주면 됩니다.

empty sessionScope.principal은 principal이 null 이거나 안에 비어있는 데이터가 들어있는지를 체크해줍니다.

따라서 

<c:when> </c:when> 태그에 들어있는 코드는 로그인이 되지 않았을 때 실행되는 코드입니다.

<c:otherwise></c:otherwise> 태그는 else에 해당하는 부분으로 로그인이 성공했을 때 보여주는 코드입니다.

로그인 성공했을 때 바뀐 <li></li> 태그 속 주소도 알맞게 설정해줍니다.

 

저장하고 서버를 실행시켜서 확인해보면 

로그인 실패했을 때 메시지 창이 잘 뜹니다.

바로 이전 페이지로 돌아왔기 때문에 아이디에 입력한 것은 그대로 남아있습니다.

로그인 성공하면 홈화면으로 이동하고 상단 탭이 바뀐 것을 볼 수 있습니다.

 

이번엔 로그아웃 기능을 만들어봅니다. 

로그인 성공했을 때 상단 탭에 로그아웃을 넣었는데 로그아웃을 누르면 다시 로그인 전 상태로 돌아가게 해봅니다.

로그아웃은 session만 날려주면 됩니다. 이때 header.jsp 의 로그아웃을 눌렀을 때 이동하는 href 값과 logout() 메서드의 GetMapping 값이 일치하는지 잘 확인해줍니다.

그리고 return을 홈화면으로 해주면

다시 로그인 전 화면으로 오는 것을 확인할 수 있습니다.