📗 self-study/📗 KH정보교육원 당산지원
[Spring] EL구문을 활용 - 아이디 저장 쿠키
천재강쥐
2022. 11. 29. 12:02
🔥 아이디 저장 쿠키 기능 🔥
✔️ Spring_Project에서 진행함
📌 현재 상황
👉🏻 아이디 저장... 원츄
💻 header.jsp
👉🏻 아이디 저장 체크박스를 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Alertify 라이브러리 -->
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/semantic.min.css"/>
<!-- jQuery 라이브러리 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- 부트스트랩에서 제공하고 있는 스타일 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- 부트스트랩에서 제공하고 있는 스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
div {box-sizing:border-box;}
#header {
width:80%;
height:100px;
padding-top:20px;
margin:auto;
}
#header>div {width:100%; margin-bottom:10px;}
#header_1 {height:40%;}
#header_2 {height:60%;}
#header_1>div{
height:100%;
float:left;
}
#header_1_left {width:30%; position:relative;}
#header_1_center {width:40%;}
#header_1_right {width:30%;}
#header_1_left>img {height:80%; position:absolute; margin:auto; top:0px; bottom:0px; right:0px; left:0px;}
#header_1_right {text-align:center; line-height:35px; font-size:12px; text-indent:35px;}
#header_1_right>a {margin:5px;}
#header_1_right>a:hover {cursor:pointer;}
#header_2>ul {width:100%; height:100%; list-style-type:none; margin:auto; padding:0;}
#header_2>ul>li {float:left; width:25%; height:100%; line-height:55px; text-align:center;}
#header_2>ul>li a {text-decoration:none; color:black; font-size:18px; font-weight:900;}
#header_2 {border-top:1px solid lightgray;}
#header a {text-decoration:none; color:black;}
/* 세부페이지마다 공통적으로 유지할 style */
.content {
background-color:rgb(247, 245, 245);
width:80%;
margin:auto;
}
.innerOuter {
border:1px solid lightgray;
width:80%;
margin:auto;
padding:5% 10%;
background-color:white;
}
</style>
</head>
<body>
<!-- 액션 태그의 특징: script 태그 영역 내부에서 사용할 수 없음 (인식 안 됨) -->
<c:if test="${ not empty alertMsg }">
<script>
// alert("${ alertMsg }");
alertify.alert("서비스 성공", "${ alertMsg }");
</script>
<c:remove var="alertMsg" scope="session" />
</c:if>
<div id="header">
<div id="header_1">
<div id="header_1_left">
<img src="https://www.iei.or.kr/resources/images/common/top_logo_s.jpg" alt="">
</div>
<div id="header_1_center"></div>
<div id="header_1_right">
<c:choose>
<c:when test="${ empty loginUser }">
<!-- 로그인 전 -->
<a href="enrollForm.me">회원가입</a>
<a data-toggle="modal" data-target="#loginModal">로그인</a>
<!-- 모달의 원리 : 이 버튼 클릭시 data-targer에 제시되어있는 해당 아이디의 div요소를 띄워줌 -->
</c:when>
<c:otherwise>
<!-- 로그인 후 -->
<label>${ loginUser.userName }님 환영합니다</label>
<a href="myPage.me">마이페이지</a>
<a href="logout.me">로그아웃</a>
</c:otherwise>
</c:choose>
</div>
</div>
<div id="header_2">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">공지사항</a></li>
<li><a href="list.bo">자유게시판</a></li>
<li><a href="">사진게시판</a></li>
</ul>
</div>
</div>
<!-- 로그인 클릭 시 뜨는 모달 (기존에는 안보이다가 위의 a 클릭 시 보임) -->
<div class="modal fade" id="loginModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form action="login.me" method="post">
<!-- Modal body -->
<div class="modal-body">
<label for="userId" class="mr-sm-2">ID : </label>
<input type="text" class="form-control mb-2 mr-sm-2" placeholder="Enter ID" id="userId" name="userId" required> <br>
<label for="userPwd" class="mr-sm-2">Password : </label>
<input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter Password" id="userPwd" name="userPwd" required>
<br>
<!-- 아이디 저장 체크박스 -->
<input type="checkbox" id="saveId" name="saveId" value="y"><label for="saveId">아이디 저장</label>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary">로그인</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">취소</button>
</div>
</form>
</div>
</div>
</div>
<br clear="both">
</body>
</html>
👉🏻 모양을 만들어 주었습니다
❗️ 로직 생각해 보기
👉🏻 요청 시 전달값 중에 saveId가 y라면 saveId라는 키값으로 현재 아이디값으로 쿠키 생성
👉🏻 요청 시 전달값 중에 saveId가 y가 아니라면 쿠키 삭제
💻 MemberController
👉🏻 기존 메소드에서 saveId를 매개변수로 추가로 받아 줌
👉🏻 쿠키를 응답 데이터로 넘기기 위해 HttpServletResponse까지 매개변수로 받음
👉🏻 넘어온 saveId에 대한 값이 y인지 아닌지 판별하여 쿠키 생성/삭제
public ModelAndView loginMember(Member m, ModelAndView mv, HttpSession session,
String saveId, HttpServletResponse response) {
if(saveId != null && saveId.equals("y")) {
// 요청 시 전달값 중에 saveId가 y라면 saveId라는 키값으로 현재 아이디값을 쿠키 생성
// 새로 만든 쿠키의 saveId라는 키값에 m.getUserId()로 받아온 값을 밸류로 넣겠다
Cookie cookie = new Cookie("saveId", m.getUserId());
cookie.setMaxAge(24 * 60 * 60 * 1); // 1초 단위, 유효기간 1일
response.addCookie(cookie);
} else {
// 요청 시 전달값 중에 saveId가 y가 아니라면 쿠키 삭제
// 쿠키는 삭제 구문이 없으나 같은 키값으로 유효기간을 0일로 지정해서 덮어씌우면 삭제 효과를 볼 수 있음!
Cookie cookie = new Cookie("saveId", m.getUserId());
cookie.setMaxAge(0); // 쿠키 삭제와 같은 의미
response.addCookie(cookie);
}
// 여기서부터는 loginMember 메소드에 기존 존재하던 코드임
Member loginUser = memberService.loginMember(m); // 그대로 호출
if(loginUser != null &&
bcryptPasswordEncoder.matches(m.getUserPwd(), loginUser.getUserPwd())) {
session.setAttribute("loginUser", loginUser);
session.setAttribute("alertMsg", "로그인에 성공했습니다.");
mv.setViewName("redirect:/");
} else { // 일치하지 않는다면 => 로그인 실패
mv.addObject("errorMsg", "로그인 실패");
mv.setViewName("common/errorPage");
}
return mv;
}
❗️ 쿠키의 value값을 Controller에서 jsp로 가지고 오는 법
👉🏻 ${ cookie이름.키값.value }
❗️ 쿠키의 유무 검사
👉🏻 ${ not empty cookie이름.키값 }
💻 header.jsp
👉🏻 Controller에서 가지고 온 cookie의 밸류를 뿌려 주기
👉🏻 만약 쿠키가 있다면 아이디 저장칸에 체크된 상태로 보여 주기
<!-- Modal body -->
<div class="modal-body">
<label for="userId" class="mr-sm-2">ID : </label>
<input type="text" class="form-control mb-2 mr-sm-2" placeholder="Enter ID" id="userId" name="userId" value="${ cookie.saveId.value }" required> <br>
<label for="userPwd" class="mr-sm-2">Password : </label>
<input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter Password" id="userPwd" name="userPwd" required>
<br>
<c:choose>
<c:when test="${ not empty cookie.saveId }">
<!-- 만약 saveId라는 쿠키가 있다면: 체크박스 체크된 상태 -->
<!-- 아이디 저장 체크박스 -->
<input type="checkbox" id="saveId" name="saveId" value="y" checked><label for="saveId">아이디 저장</label>
</c:when>
<c:otherwise>
<!-- 만약 saveId라는 쿠키가 없다면: 체크박스 체크되지 않은 상태 -->
<input type="checkbox" id="saveId" name="saveId" value="y"><label for="saveId">아이디 저장</label>
</c:otherwise>
</c:choose>
</div>
📌 현재 상황
👉🏻 아이디 저장 체크박스 후 로그인
👉🏻 로그인 완료
👉🏻 로그아웃
👉🏻 다시 로그인 모달창에 접속해 보면 ID 값이 남아 있음!
