03-회원제 게시판 만들기_SpringBoot와 JPA
02-회원(member)파트 - SpringBoot
[로그인과 로그아웃]
아래와 같은 화면을 보여주기 위해 index.html 內 로그인을 위한 링크를 추가해준다.
<a href="member/login">로그인</a><br><br>
로그인을 위한 html을 resources/member 폴더 내 생성해준다, 그리고 아래와 같은 화면을 보여주기 위한 코드를 login.html에 작성해준다. 로그인 창은 form을 사용했고 post로 컨트롤러에 전달한다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>login.html</title>
</head>
<body>
<form action="/member/login" method="post">
<input type="text" name="memberEmail" placeholder="이메일"><br>
<input type="text" name="memberPassword" placeholder="비밀번호"><br>
<input type="submit" value="로그인">
</form>
</body>
</html>
로그인을 위해서는 Email과 Password가 필요하기에 dto pacakage 內 MemberLoginDTO를 만들고 해당항목을 추가해준다.
package com.ex.test01.dto;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import javax.validation.constraints.NotBlank;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class MemberLoginDTO {
private String memberEmail;
private String memberPw;
}
MemberController에서는 로그인 창을 사용자에게 보여주기 위해 아래와 같이 코드를 작성한다.
// 로그인 화면 보여주기
@GetMapping("/login")
public String loginForm(Model model) {
model.addAttribute("login", new MemberLoginDTO());
return "member/login";
}
여기까지 작성하면 사용자에게 로그인 화면은 정상적으로 보여지게 된다.
로그인 처리
로그인 처리를 위해 MemberController에 코드를 추가해준다. 내용은 정상적으로 로그인 한 경우에는 index 페이지를 띄워주고 로그인 정보가 잘못된 경우에는 "로그인 정보가 잘못되었습니다."라는 알림창을 띄워주고 사용자가 확인을 누를 경우 다시 login창을 띄워주도록 구성한다. 이 알림창을 띄우기 위해서는 resources 폴더 內 message.html을 만들어준다.
// 로그인 처리
@PostMapping("/login")
public String login(@ModelAttribute("login") MemberLoginDTO memberLoginDTO, Model model, HttpSession session) {
boolean loginResult = ms.login(memberLoginDTO);
if (loginResult) {
session.setAttribute("loginEmail", memberLoginDTO.getMemberEmail());
return "redirect:/";
} else {
model.addAttribute("message", "로그인 정보가 잘못되었습니다.");
model.addAttribute("searchUrl", "/member/login");
return "member/message";
}
}
message.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script th:inline="javascript">
/*<![CDATA[*/
var message = [[${message}]];
alert(message);
location.replace([[${searchUrl}]]);
/*]]>*/
</script>
</head>
<body>
</body>
</html>
로그인 정보 오류시 알림 창
빨간색 처리 된 ms.login을 클릭하면 MemberService에 아래 메서드가 자동으로 추가된다.
boolean login(MemberLoginDTO memberLoginDTO);
MemberServiceImpl에 메서드가 추가되고 거기에 로그인 관련 코드를 추가 삽입한다.
// 로그인 처리
@Override
public boolean login(MemberLoginDTO memberLoginDTO) {
MemberEntity memberEntity = mr.findByMemberEmail(memberLoginDTO.getMemberEmail());
if (memberEntity != null) {
if (memberEntity.getMemberPw().equals(memberLoginDTO.getMemberPw())) {
return true;
} else {
return false;
}
} else {
return false;
}
}
여기까지 작성 후 index 페이지에서 회원가입 후 해당 아이디로 login이 정상적으로 작동하는지 확인하기 위해 login 후 login session값을 보여주는 작업을 진행한다.
login Session값 보여주기
사용자가 정상적으로 로그인 한 경우 해당 세션값을 index 페이지 內 보여주기 위한 코드를 작성해준다.
세션값 이메일: <p th:text="${session['loginEmail']}"></p>
아이디와 패스워드를 정상적으로 입력하여 로그인이 되면 로그인 한 Email정보(Session값)을 볼 수 있다.
로그아웃
로그인 된 사용자의 로그아웃을 위해 index 페이지 內 로그아웃 링크를 하나 만들어 준다.
<a href="member/logout">로그아웃</a>
MemberController에 logout 관련 코드를 추가해준다. 사용자가 로그아웃을 클릭하면 로그아웃이 이뤄지고 index 페이지를 띄워준다.
// 로그아웃
@GetMapping("logout")
public String logout(HttpSession session){
session.invalidate();
return "redirect:/";
}
댓글남기기