이번에는 Login / Logout 을 만들 것이다.
둘 다 간단해서 금방할 수 있을 것으로 예상된다.
뒤로가기, '/' 요청으로 home 가기
기능 구현 이전에 뒤로가기 버튼이랑 '/' 요청만 줘도 home으로 가게 만들겠다.
너무 불편하다..
뒤로가기
그냥 javascript:history.go(-1) 을 줘서 뒤로가기를 구현하겠다.
잘 구현된 모습
'/' 요청으로 home으로 가기
스프링부트 부터는 '/' 만 단독으로 있는 요청은 무시된다고 배웠다. 그래서 서버에 들어갈때마다 /home이라고 꼬박꼬박 요청을 줘야하는데 너무 불편하다..
다음과 같은 설정 클래스 생성
WebMvcConfigurer 를 implements 해서 default 기능으로 addViewControllers 를 사용하겠다.
@Configuration 에너테이션을 추가하고 addViewControllers 디폴트 메서드를 오버라이드한다.
그리고 안에 registry.addViewController("/").setViewName("redirect:/home"); 을 줘서 '/' 요청만 와도 home으로 가도록 설정한다.
스크린샷만으로는 보여줄 수 없지만 localhost 만 줘도 home으로 화면이 나오는 모습
아주 편하다!
UserManagement.jsp 에서 login, logout 만들기
logout인 경우엔 login 이 떠야하고 login중에는 logout이 떠야한다.
UserManagement.jsp로 가서 JSTL을 이용해서 조건문을 넣고 session에 정보가 있는지 없는지 확인해서 login, logout이 나타나도록 구현해야겠다.
JSTL을 하기위해 준비를 했고
if문을 이용해서 session에 id가 존재하고 request에 message도 존재한다면 로그인한 상태이니까 logout을 실행하고 반대라면 loginForm function을 실행함.
Login 을 클릭하면 loginForm이 나와서 로그인을 유도하고 로그인 한 상황이라면 logout을 클릭해서 로그아웃을 할 수 있게 만들었다.
이제 function을 처리해주자
userManagement.js 에 loginForm funcion 구현
Login을 클릭시 LoginForm function이 실행되면서 로그인 폼이 textArea01에 나온다. 근데 만약 textArea01에 글이 없는 경우에만 폼이 생성되고 textArea01에 무언가 있으면 해당 HTML을 지우도록 했다.
UserManagement.jsp의 화면에서 실습해보면 Login을 클릭 시 form이 나타나고
Login 을 한번 더 클릭하면 form이 사라진다.
userManagement.js 에 login function 구현
login을 RESTContoller에 POST메소드, json타입의데이터 형태로 axios 요청을 보내고 200번대 정상 status가 응답이오면 alert 으로 출력을하고 그외 status가 들어오면 재입력 요청 문구와 함께 error status를 alert으로 띄운다.
백엔드 처리 login Controller 기능 구현
로그인을 위해 유저가 정보를 입력하면 입력한 정보 데이터가 DB에 존재하는지 확인하고 존재한다면 로그인 성공 존재하지않는다면 실패해야 한다.
로그인 성공 시
1. 로그인 성공 alert 창 생성
2. UserManagement.jsp에 ㅁㅁㅁ님 안녕하세요. 문구 추가
3. reload가 필요.
로그인 실패 시
1. 로그인 실패 alert 창 생성
2. Usermanagement.jsp에 다시 입력하세요. 문구 추가
이정도를 구현해야 할 것 같다.
RESTContoller로 넘어가서
Post 매핑으로
consumes는 JSON 형태의 ID, password 의 정보를 받을 것이라서 JSON VALUE
produces는 로그인 성공/실패의 상태를 TEXT 형태로 응답할 것이기 때문에 TEXT_PLAIN_VALUE로 한다.
ResponseEntity도 Text의 body를 입력해야하니까 String 형식으로 선언하고 DB에 password가 Scrypt으로 구현돼있으니 passwordEncoder 객체를 통해 DB의 정보와 요청된 password 정보를 match하여 일치한지 확인한다.
DB에서 가져온정보가 존재하고 요청받은 password와 DB의 password가 일치하다면 -> 로그인 성공, 세션에 userID, userName을 담고 정상 로그인 문구를 body에 담는다.
DB에서 가져온정보가 존재하고 요청받은 password와 DB의 password가 일치하지 않다면 -> 로그인 실패, 재 입력 문구를 body에 담는다.
Logout 구현하기
logout을 클릭하면 Onclick 이벤트로 logout function을 먼저 실행한다.
Usercontoller로 logout 요청을 보내면서 axios get방식으로 응답이 문제 없이 왔다면 로그아웃 alert 창을 띄운 후 새로고침을 해주고 아닐경우 시스템 오류 메세지를 띄운다.
logout 구현하기2 : UserController
UserContoller로 넘어가서 세션을 지워주고 다시 페이지로 돌아온다.
테스트
-
문제 없는 로그인
계획했던대로 ㅁㅁㅁ님 안녕하세요 alert창이 뜨면서 새로고침되고 ㅁㅁㅁ님 안녕하세요 문구가 UserManagement.jsp에 나온다. (Logout 창으로 바뀐 것도 확인할 수 있다.) -
문제가 있는 로그인 (ID 혹은 password 오류)
로그인 실패 alert 창이 뜨면서 status 값도 같이 띄워진다.
문제발생
사실 이미 고쳐서 문제없이 진행된 것 같지만 약 20여분 정도 로그인, 로그아웃은 잘 되는 것 같은데 login, logout 클릭하는 태그가 출력되지 않는 버그가 있었다.
<해당부분이 출력되지 않음>
원인파악
JSTL 문제인 것 같았는데 계속 못찾았었지만, 자세히 보니 오타였다.
LoginID 를 loginID 으로 적어놔서 인식을 못한 것 이었다.
문제해결
loginID => LoginID 으로 변경하였더니 문제없이 기능이 잘 구현 되었다.
느낀점
하하.. 문제로 태그 만들기도 애매하다 느꼈지만, 많은 개발자들이 이런 작은 오타에 많은 시간을 소비할 것 같다고 느껴서 그냥 문제태그로 올렸다. 시작할 때 '간단하다~ 얼마안걸린다~' 생각했지만 꽤 시간이 많이 걸렸다. 역시 아직 많이 부족한가보다.
git URL
