백엔드 교육과정/4월

2024.04.18 _ jsp Servlet 을 이용한 게시판 로그인 기능 추가

Ji@n 2024. 4. 18. 17:30

 

 

 

 

게시판 페이지(list.jsp) 에서 

로그인  먼저 만들기

 

 

<a href="login.go">로그인</a>

 

 

LoginController(servlet) 만들기 

@WebServlet("*.go")

경로를 설정해서

.go 로 끝나는 모든 요청에 응답해야함

 

"login" 이 포함 되어 있고 

GET 요청이면 loginGET(request,response) 로

POST 요청이면 loginPOST(request, response) 로

 

@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		

if(requestURI.contains("login")) {
			System.out.println("login 호출 확인");
			if(requestMethod.equals("GET")) {
				loginGET(request,response);
			}else if(requestMethod.equals("POST")) {
				loginPOST(request, response);
			}
		}
 	}// end service()

 

 

loginGET()

 

주석 처리한 건 내코드

Dispatcher를 

 

request.getRequestDispatcher(경로)

.forward(request,response);

 

이렇게 줄여서 사용할 수 있다. 

 

// login.jsp 페이지가 호출되어야 한다
	private void loginGET(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		String targetURL = request.getParameter("targetURL");
		
		System.out.println("loginGET");
//		String path = BOARD_URL + LOGIN + EXTENSION;
//		RequestDispatcher dispatcher
//			= request.getRequestDispatcher(path);
//		dispatcher.forward(request, response);
		
		request.setAttribute("targetURL", targetURL);
		request.getRequestDispatcher("/WEB-INF/board/login/login.jsp") //스프링에서는 /WEB-INF , .jsp 알아서 처리해줌
			.forward(request, response);
		
	}//end loginGET()

 

 

 

 

글 작성을 누르면 로그인 페이지(login.jsp)로 이동하게 만들기 

 

login.jsp

 

여기서 targetURL은 사용자가 이전에 접근하고자 했던 URL임

 

로그인 폼을 표시하는 JSP 페이지에서 사용자가 이전에 접근하고자 했던 URL을 유지하기 위한 용도로 사용하고

 

사용자가 로그인 페이지로 이동하기 전에 이전에 접근하고자 했던 페이지의 URL을 targetURL이라는 이름으로 파라미터

 

로 받아와서, 그 값을 로그인 폼의 hidden input 태그에 저장한다.

 

이렇게 함으로써 사용자가 로그인을 마치고 나서도 이전에 접근하고 있던 페이지로 다시 리디렉션될 수 있다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
	<h1>로그인</h1>
	    <form action="login.go" method="post">
	        
	            <input type="text" name="memberId" required autofocus><br>
	     
	            <input type="password"  name="password" required><br>
	        
	        	<input type="hidden" name="targetURL" value="${targetURL }">
	        	
	            <input type="submit" value="로그인"> 
	       
	    </form>
</body>
</html>

 

 

loginPOST(request,response) 만들기 

 

아이디, 비번 ,URL 받아오기 

 

 이전에 사용자가 접근하려고 했던 페이지의 URL을 유지하고, 로그인 후 해당 페이지로 리디렉션하기 위한 용도로 사용한다

String memberId = request.getParameter("memberId");
String password = request.getParameter("password");
String targetURL = request.getParameter("targetURL");

 

 

* loginPOST를 수행하는 상황 
- index.jsp에서 login 버튼 클릭 - 로그인 페이지 - 로그인 성공 - index.jsp 이동 
- 글 작성 버튼(register.do) 클릭 - 로그인 페이지 - 로그인 성공 - register.do 이동

 

 

받아온 아이디에 "test" 라는 단어가 포함되어 있고 ( contains () )

받아온 비밀번호가 "1234" 라는 문자열로 일치할 때( equals() )

 

세션 생성한다( HttpSession session = request.getSession(); )

memberId 변수를 세션에 "memberId" 라는 이름으로 저장한다. ( session.setAttribute("세션 저장명", 변수명); )

 

+ 약간의 수정

 

로그인 후에 이전에 사용자가 접근했던 페이지로 리디렉션하는 기능을 구현한 것

 

만약 이전에 사용자가 접근하려고 했던 페이지의 URL이 존재하면 해당 페이지로 Redirection 한다.( !targetURL.equals(" ") 비어있지 않으면서 targetURL != null null이 아닐 경우에 )

 

이전 페이지가 없으면 기본적으로 index.jsp로 Redirection 한다.( else )

 

아이디와 비밀번호가 일치하지 않으면 로그인 페이지로 Redirection 한다. ( else )

 

	
		if(memberId.contains("test") && password.equals("1234")) { 
			HttpSession session = request.getSession(); //세션 생성 
			session.setAttribute("memberId", memberId);
			session.setMaxInactiveInterval(60); // 세션 60초 생성
			
			// get방식은 만드는 사람이 다 처리해줘야함...

			if(!targetURL.equals("") && targetURL != null) { // 비어있지 않고 null이 아닐경우만 target으로 간다, 아니면 index로 감
				response.sendRedirect(targetURL);				
			}else {
				response.sendRedirect("index.jsp");
			}
			
		}
		else {
			response.sendRedirect("login.go");
		}

 

 

로그아웃 기능 까지

 

 

list.jsp

 

<c:if test="${empty sessionScope.memberId }"> 
	 <a href="login.go">로그인</a>   
</c:if>
   
<c:if test="${not empty sessionScope.memberId }">
	  <a href="logout.go">로그아웃</a>
</c:if>

 

 

logout.sevlet

 

세션 생성하고

세션(= memberId) 이 존재할 때 

세션을 제거 하고 

index.jsp 로 이동시키기

 

private void logout(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		System.out.println("logout() 호출");
		HttpSession session = request.getSession();
		if(session.getAttribute("memberId") != null) {
			session.removeAttribute("memberId");
			
			response.sendRedirect("index.jsp");
		}
		
	}// end logout()

 

 

 

+

 

로그인 댓글 기능 중 

 

로그인한 사용자의 아이디(memberId)가 아닌 사용자의 댓글에는 
수정 , 삭제 버튼을 히든으로 표시하도록 만들기

 

 

게시글 댓글 전체를 가져오는 함수 getAllReplies() 를 수정해야함 

 

1. 아이디 가져오기 

let memberId = $('#memberId').val();
console.log(memberId);

 

 

memberId는 로그인한 사람만 접근할 수 있도록 해놨음 

 

<input type="hidden" id="boardId" name="boardId" value="${board.boardId }"> <!-- 로그인 안하면 접근 못함 -->

 

2. 활성화 , 비활성화 선언하기 인데 if문 안에 선언함 

 

let disabled = '';
let readonly = '';
							
if(memberId != this.memberId){ // this : 컬렉션의 각 인덱스 데이터를 의미
								
		disabled = 'disabled';
		readonly = 'readonly';
}

 

 

로그인한 사용자 (memberId) 와 댓글의 아이디 (this.memberId) 가 다르면 

비활성화 시키고 읽기용으로 바꾸기 

* this : 컬렉션의 각 인덱스 데이터를 의미

 

list += '<div class="reply_item">'
	+ '<pre>'
	+ '<input type="hidden" id="replyId" value="'+ this.replyId +'">'
	+ this.memberId
	+ '&nbsp;&nbsp;' // 공백
	+ '<input type="text" id="replyContent" '+ readonly +' value="'+ this.replyContent +'">' //댓글 내용 읽기 전용으로
	+ '&nbsp;&nbsp;' // 공백
	+ replyDateCreated
	+ '&nbsp;&nbsp;' // 공백
	+ '<button class="btn_update" '+ disabled +'>수정</button>' 
	+ '<button class="btn_delete" '+ disabled +'>삭제</button>' 
	+ '</pre>'
	+ '</div>';