반응형
# MVC06_06 회원 로그인 화면처리
## 개발자 도구_세션 확인
- 크롬 개발자 도구(F12) 실행, MVC06 작업내용을 바탕으로 세션 확인
- 개발자 도구(F12) 실행 된 상태에서 http://localhost:8081/MVC06/memberList.do 진입 후 Network 탭에 Response Headers 확인해 보면 Set-Cookie에 JSESSIONID 존재.
- 해당 브라우저에서 두번 째 요청 시 Network 탭에 Request headers 확인해 보면 Cookie에 JSESSIONID 존재.
## MVC06 회원 로그인 세션 이용_로그인(회원인증)에 따른 화면 작업
- 회원 로그인 전(회원 인증 전)에는 로그인 폼이 나오고, 회원 로그인 완료(회원 인증 성공)에는 로그인 폼 보이도록 설정
### MemberLoginController
- 로그인 성공에 따른 인증여부 설정
1. 방법1_session.setAttribute();
if (user_name != null && !"".equals(user_name)) {
// 로그인 성공 -> 객체 바인딩.
HttpSession session = request.getSession(); // 세션을 가져와서 설정하는 코드로 아래 코드와 동일.
session.setAttribute("userId", user_id);
session.setAttribute("userName", user_name);
} else {
// 로그인 실패 -> 객체 바인딩, 실패 메시지
request.getSession().setAttribute("userId", user_id);
request.getSession().setAttribute("userName", user_name);
request.getSession().setAttribute("msg", "사용자 정보가 올바르지 않습니다.");
}2. 방법2_request.setAttribute();
if (user_name != null && !"".equals(user_name)) {
// 로그인 성공 -> 객체 바인딩.
request.setAttribute("userId", user_id);
request.setAttribute("userName", user_name);
} else {
// 로그인 실패 -> 객체 바인딩, 실패 메시지
request.getSession().setAttribute("userId", user_id);
request.getSession().setAttribute("userName", user_name);
request.getSession().setAttribute("msg", "사용자 정보가 올바르지 않습니다.");
}### memberList.jsp
- MemberLoginController 에서 방법1_session.setAttribute();로 로그인 인증값 담은 경우 -> jsp에서 sessionScope로 값 가져오기
sessionScope.userId 로 진행
<c:if test="${sessionScope.userId}">
<form class="form-inline" action="${ctx}/memberLogin.do" method="post">
<div class="form-group">
<label for="user_id">ID:</label>
<input type="text" class="form-control" id="user_id" name="user_id">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<button type="submit" class="btn btn-default" onclick="return check()">로그인</button>
</form>
</c:if>- MemberLoginController 에서 방법2_request.setAttribute();로 로그인 인증값 담은 경우 -> jsp에서 requestScope로 값 가져오기
requestScope.userId 로 진행
<c:if test="${requestScope.userId}">
<form class="form-inline" action="${ctx}/memberLogin.do" method="post">
<div class="form-group">
<label for="user_id">ID:</label>
<input type="text" class="form-control" id="user_id" name="user_id">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<button type="submit" class="btn btn-default" onclick="return check()">로그인</button>
</form>
</c:if>1. 로그인 전 화면
2. 로그인 성공 화면
## 본인 정보만 삭제 버튼 표시되도록 변경 작업
- 로그인 정보에 따라 삭제 버튼 사용/미사용 될 수 있도록 작업
<c:if test="${sessionScope.userId == vo.id}">
<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(${vo.num})"></td>
</c:if>
<c:if test="${sessionScope.userId != vo.id}">
<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(${vo.num})" disabled="disabled"></td>
</c:if>1. 로그인 전 (삭제 버튼 모두 비 활성화)
2. 로그인 시 (본인 것만 삭제 버튼 활성화)
# MVC06_07 회원 로그아웃
## memberList.jsp
- 로그아웃 버튼 클릭 시 function logout() 실행하여 memberLogout.do 실행.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>
<%@ page import="java.util.*" %>
<%
// ArrayList<MemberVO> list=(ArrayList<MemberVO>)request.getAttribute("list");
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
<c:if test="${!empty msg}">
alert("${msg}");
<c:remove var="msg" scope="session"/>
</c:if>
});
function deleteFn(num) {
location.href="${ctx}/memberDelete.do?num="+num; // ?num=12
}
function check() {
if ($('#user_id').val() == '') {
alert("아이디를 입력해주세요.");
return false;
}
if ($('#password').val() == '') {
alert("비밀번호를 입력해주세요.");
return false;
}
return true;
}
function logout() {
location.href="<c:url value='/memberLogout.do'/>";
}
</script>
</head>
<body>
<div class="container">
<h2>회원관리 시스템</h2>
<div class="panel panel-default">
<div class="panel-heading">
<c:if test="${sessionScope.userId == null || sessionScope.userId == ''}">
<form class="form-inline" action="${ctx}/memberLogin.do" method="post">
<div class="form-group">
<label for="user_id">ID:</label>
<input type="text" class="form-control" id="user_id" name="user_id">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<button type="submit" class="btn btn-default" onclick="return check()">로그인</button>
</form>
</c:if>
<c:if test="${sessionScope.userId != null && sessionScope.userId != ''}">
${sessionScope.userName}님 환영합니다.
<button type="submit" class="btn btn-warning" onclick="logout()" >로그아웃</button>
</c:if>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>번호</th>
<th>아이디</th>
<th>비밀번호</th>
<th>이름</th>
<th>나이</th>
<th>이메일</th>
<th>전화번호</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<c:forEach var="vo" items="${list}">
<tr>
<td>${vo.num}</td>
<td><a href="${ctx}/memberContent.do?num=${vo.num}">${vo.id}</a></td>
<td>${vo.pass}</td>
<td>${vo.name}</td>
<td>${vo.age}</td>
<td>${vo.email}</td>
<td>${vo.phone}</td>
<c:if test="${sessionScope.userId == vo.id}">
<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(${vo.num})"></td>
</c:if>
<c:if test="${sessionScope.userId != vo.id}">
<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(${vo.num})" disabled="disabled"></td>
</c:if>
</tr>
</c:forEach>
<tr>
<td colspan="8" align="right"><input type="button" value="회원가입" class="btn btn-primary" onclick="location.href='${ctx}/memberRegister.do'"/></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel-footer">
회원관리 ERP System(admin@naver.com)
</div>
</div>
</div>
</body>
</html>## HandlerMapping
- memberLogout.do 에 따른 HandlerMapping 추가.
package kr.bit.frontcontroller;
import java.util.HashMap;
import kr.bit.controller.Controller;
import kr.bit.controller.*;
public class HandlerMapping {
private HashMap<String, Controller> mappings;
public HandlerMapping() {
mappings=new HashMap<String, Controller>();
mappings.put("/memberList.do", new MemberListController());
mappings.put("/memberInsert.do", new MemberInsertController());
mappings.put("/memberRegister.do", new MemberRegisterController());
mappings.put("/memberContent.do", new MemberContentController());
mappings.put("/memberUpdate.do", new MemberUpdateController());
mappings.put("/memberDelete.do", new MemberDeleteController());
mappings.put("/memberLogin.do", new MemberLoginController());
mappings.put("/memberLogout.do", new MemberLogoutController());
}
public Controller getController(String key) { // key=>/memberList.do
return mappings.get(key);
}
}
## MemberLogoutController 생성
- 프로젝트 > src > kr.bit.controller > class 클릭 후 MemberLogoutController 이름의 컨트롤러 생성
package kr.bit.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MemberLogoutController implements Controller {
@Override
public String requestHandler(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String ctx = request.getContextPath();
// 세션을 가져와서 세션 제거
// 세션을 제거하는 방법
// 1. 강제로 세션 제거
request.getSession().invalidate();
// 2. 브라우저 강제 종료(JSESSIONID 브라우저 쿠키에 저장)
// 3. 세션이 종료될때까지 기다리는 것.(세션 타임아웃 : 기본 30분 = 1800초)
return "redirect:" + ctx + "/memberList.do";
}
}
### 세션을 제거하는 방법
1. 세션을 강제로 제거하는 방법
2. 브라우저 강제 종료(JSESSIONID 브라우저 쿠키에 저장)
3. 세션이 종료될때까지 기다리는 것.(세션 타임아웃 : 기본 30분 = 1800초)
- 세션 타임아웃의 경우 Servers > 톰캣 > web.xml에 아래와 같이 설정되어있다.
<!-- ==================== Default Session Configuration ================= -->
<!-- You can set the default session timeout (in minutes) for all newly -->
<!-- created sessions by modifying the value below. -->
<session-config>
<session-timeout>30</session-timeout>
</session-config>## 회원정보 삭제한 경우에도 로그아웃 될 수 있도록 작업
- MemberDeleteController 에 세션 제거 코드 추가.
package kr.bit.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import kr.bit.model.MemberDAO;
public class MemberDeleteController implements Controller{
@Override
public String requestHandler(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String ctx=request.getContextPath(); // /MVC04
int num=Integer.parseInt(request.getParameter("num"));
MemberDAO dao=new MemberDAO();
int cnt=dao.memberDelete(num);
String nextPage=null;
if(cnt>0) {
request.getSession().invalidate();
nextPage="redirect:"+ctx+"/memberList.do";
}else {
throw new ServletException("not delete");
}
return nextPage;
}
}
반응형
'인프런 강의 학습 > MVC 프레임워크_나프2탄' 카테고리의 다른 글
| 인프런 나프_2탄 9일차 : MVC06_08 마무리 (0) | 2021.06.26 |
|---|---|
| 인프런 나프_2탄 8일차 : MVC06_08 회원 로그인 후 상세보기 페이지 (0) | 2021.06.26 |
| 인프런 나프_2탄 6일차 : MVC06_03~05 세션 (0) | 2021.06.26 |
| 인프런 나프_2탄 5일차 : MVC06_01~02 회원 로그인 페이지 작성, 회원 로그인 기능(세션 바인딩) (0) | 2021.06.25 |
| 인프런 나프_2탄 4일차 : MVC05_05 마무리 (0) | 2021.06.24 |