이전 글에서는 login을 위한 controller, service, dto, domain 패키지 등을 구성하고 실제 로그인이 되었는지를 리턴하는 코드를 작성하였다.
이번에는 그 서버에 알림을 띄우는 기능을 이용해
1. 로그인 성공 -> 개인 페이지로 넘어감
2. 로그인 실패 -> "로그인 실패" 알림 -> 다시 로그인 페이지로 돌아감
이렇게 두 가지 방식으로 기능 구현을 해보려한다.
2. 알림 띄우기
먼저, loginController의 loginForm() 메소드를 수정하여
로그인 성공 시에는 testThymeleaf.html이 뜨도록 수정하였다.
// submit login information
@PostMapping("/login")
public String loginForm(@ModelAttribute("loginForm") LoginFormDto loginFormDto){
log.info("loginFormDto : id={}, pw={}", loginFormDto.getId(), loginFormDto.getPw());
// 로그인 성공
if(checkAuthService.checkAuth(loginFormDto)){
return "testThymeleaf";
}
// 로그인 실패
else{
}로그인 실패 시에는 위에서 말한 것처럼 "로그인 실패" 알림을 띄우려한다.
(사실 이렇게 코드를 짜면 안 되지만,,,왜냐하면 로그인 시에 개인 페이지로 이동하려면 로그인 하는 사람의 정보를 가져와야하므로 단순히 bool 리턴 타입으로 가면 안된다! 그치만 이전에 했던 구조를 우선은 그냥 가져가려고 일단 해둠,, 이거 끝나고 고쳐야지!)
우선, 로그인 알림 메시지 처리용 DTO를 생성한다.
어떤 메시지를 담을건지, 그리고 어떤 페이지로 넘어가도록 할건지를 저장해야 한다.
따라서 다음과 같이 DTO를 구성하였다.
package com.example.loginserver.dto;
import lombok.Getter;
import lombok.Setter;
@Setter
@Getter
public class AlertMessageDto {
private String message;
private String redirectUrl;
}
message가 alert에 띄울 메시지, redirectUrl이 어디로 redirect할지를 저장한다.
이제 이 정보를 로그인 실패 시 AlertMessageDto를 생성해 message와 redirectUrl에 담아 전달하는데, 그러기 위해 loginForm 컨트롤러 함수를 다음과 같이 수정하였다.
// submit login information
@PostMapping("/login")
public String loginForm(@ModelAttribute("loginForm") LoginFormDto loginFormDto, Model model){
log.info("loginFormDto : id={}, pw={}", loginFormDto.getId(), loginFormDto.getPw());
// 로그인 성공
if(checkAuthService.checkAuth(loginFormDto)){
log.info("login success");
return "testThymeleaf";
}
// 로그인 실패
else{
log.info("login fail");
AlertMessageDto msg = new AlertMessageDto();
msg.setMessage("로그인 실패! 아이디나 비밀번호를 확인해주세요.");
msg.setRedirectUrl("/login");
return alertLoginFail(msg, model);
}
}
로그인이 실패하면 AlertMessageDto 객체인 msg를 생성하고, 거기에 setter를 만들어 두었으니, message와 redirectUrl을 설정한다.
그리고 alertLoginFail()이라는 함수를 호출해 넘겨준다.
여기서는 Model 객체인 model을 함께 넘겨준다.
컨트롤러에서는 Model 객체를 인자로 받을 수 있어 여기서 넘겨준다.
// alert for login failure and redirect
private String alertLoginFail(AlertMessageDto msg, Model model) {
model.addAttribute("alertMessage", msg);
return "alertMessageRedirect";
}
alertLoginFail 함수는 위와 같이 AlertMessageDto 객체와 Model 객체를 받아, model에 AlertMessageDto 객체를 추가한다.
alertMessage라는 이름으로 객체를 등록하고, alertMessageRedirect.html 뷰를 불러온다.
Model에 등록한 객체는 이제 그 이름으로 뷰 단에서도 접근 가능하다.
alertMessageRedirect.html은 다른 html 파일들(뷰 파일들)처럼 resources/templates에 저장한다.
그리고, 내용은 다음과 같다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>alert message redirect</title>
<script th:inline="javascript">
/*<![CDATA[*/
// Spring Boot에서 전달한 메시지를 alert 창으로 표시하는 함수
function showAlert() {
var alertMessage = /*[[ ${alertMessage.message} ]]*/ '';
alert(alertMessage);
var redirectUrl = /*[[ ${alertMessage.redirectUrl} ]]*/ '';
window.location.replace(redirectUrl); // 원하는 경로로 리다이렉트
}
/*]]>*/
</script>
</head>
<body onload="showAlert()">
<h1>Alert Message</h1>
</body>
</html>사실, 이걸 짜는 데에는 chatGPT의 도움을 받았다! thymeleaf 문법 어려워..
코드를 해석하자면, head에 선언한 showAlert() 함수 내부에서 alertMessage 변수에 아까 Model에 추가한 alertMessage.message로 설정한 message를 넣어준다.
그리고 alert()함수로 이걸 알림을 띄우도록 하고,
redirecUrl에 마찬가지로 alertMessage.redirectUrl을 가져와 넣어준다.
이걸 window.location.replace()함수를 이용해 원하는 경로로 리다이렉트하면 완료된다.
(항상 build를 다시 하고 실행하자! 반영이 바로 안 되는 경우가 되게 많음)
이제 실행 결과를 보자.
먼저, 빌드 - 실행 후 main page에 접속해본다.
다음으로, db에 로그인 정보를 넣어주기 위해 localhost:8080/h2-console로 접근한다.
거기서 로그인을 클릭해주고,
다음과 같이 작성해 run 시켜주면 아래 결과와 함께 user 정보가 생성된다.
main page에서 로그인 버튼을 클릭해 로그인창으로 이동한다.
거기서 다음과 같이 user 정보를 작성하고, 로그인하기를 클릭하면,
설정해둔대로 로그인이 성공해 test page가 뜬다.
다시 로그인 창으로 돌아가서,
pw를 바꿔보자.
위와 같이 없는 계정으로 로그인을 시도해보자.
로그인하기를 클릭해보면,
위와 같이 Alert Message 창과 함께 '로그인 실패' alert가 뜨게 된다.
여기서 확인을 누르면,
설정한대로 login page로 돌아오게 된다!!
예ㅔㅔ!!
회사일이 급 바빠져서 이거 하나 만드는데 너무 오래 걸렸다...(쿠버네티스랑 앱개발 공부하느라 그런것도 있지만...ㅎㅎ)
다시 열심히 달려봐야지!
참고자료 :
https://aljjabaegi.tistory.com/564
'개발 > Spring Boot' 카테고리의 다른 글
| [로그인 기능 만들기] 11. JpaAuditing Test (0) | 2024.06.28 |
|---|---|
| [로그인 기능 만들기] 9. login 인증(1) (0) | 2024.05.30 |
| [로그인 기능 만들기] 8. JPA를 사용한 DB 구현(2) (0) | 2024.05.27 |
| [로그인 기능 만들기] 7. website login-form 만들기(3) (1) | 2024.05.24 |
| [로그인 기능 만들기] 6. website login-form 만들기(2) (0) | 2024.05.24 |