[유튜브-메타코딩] - 나만의 블로그 만들기 - 13. 전형적인 방식의 로그인 방법

- loginForm.jsp 수정

id값으로 데이터를 받아오기 위해 button id 값 넣고, js 파일 임포트

<button id = "btn-login" class="btn btn-primary">로그인</button>

<script src="/blog/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>

---

- user.js 수정

id가 btn-login 버튼이 눌렸을때 login 함수 호출

let index = {
	// let _this = this; // function(){} 사용하려면 this를 바인딩 해줘야 한다.
	init: function() {
		$("#btn-save").on("click", ()=> // function(){}대신 ()=>{}를 사용하는 이유는 this를 바인딩 하기 위해서!
			this.save()
		);
		$("#btn-login").on("click", ()=>
			this.login()
		);
	},

login 함수 정의

login: function() {
		//alert('user의 login함수 호출됨');
		// 데이터를 ID값으로 가져와서 객체화
		let data = {
			username: $("#username").val(),
			password: $("#password").val()
		};
		
		// console.log(data);
		
		// 로그인시 GET이 아닌 POST를 사용
		$.ajax({
			type : "POST",
			url : "/blog/api/user/login",
			data : JSON.stringify(data), // http body 데이터
			contentType : "application/json; charset=utf-8",  //MIME 타입
			dataType : "json" // 요청을 서버로 해서 응답이 왔을때  기본적으론 문자열이 응답 => 생긴게 JSON이라면 javascript 오브젝트로 변경.
		}).done(function(resp){ //  javascript 오브젝트로 변경된 응답 값이 파라미터에 저장
			alert("로그인이 완료되었습니다.");
			location.href="/blog";
		}).fail(function(error){
			alert(JSON.stringify(error));
		});
		
	}

---

- UserApiController POST메서드 생성

스프링 내장클래스인 HttpSession을 DI해서 가져온다.

	@Autowired  // DI한다.
	private HttpSession session;

POST메서드 생성하여 Service의 로그인 메서드를 호출하고 그 값으로 세션 만들기.

	@PostMapping("/api/user/login")
	public ResponseDto<Integer> login(@RequestBody User user){ //, HttpSession session 매개변수에 적어도 DI가 된다.
		System.out.println("UserApiController login 호출됨");
		
		User principal = userService.로그인(user); // principal 접근 주체
		
		// 세션 만들어주기
		if(principal != null) {
			session.setAttribute("principal", principal);
		}
		
		return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
		
	}

---

- UserRepository에 쿼리문 생성

1. JPA에서 제공하는 Naming 쿼리 전략으로 로그인에 필요한 Select문을 만든다.

JPA Naming 쿼리 전략 코드

	// JPA Naming 쿼리 전략
	// SELECT & FROM user WHERE username = ?1 AND password = ?2; 
	User findByUsernameAndPassword(String username, String password);

2. NativeQuery 방법도 있다.

nativeQuery코드

	// 아래 nativeQuery 방법도 있다.
	@Query(value = "SELECT & FROM user WHERE username = ?1 AND password = ?2", nativeQuery = true)
	User login(String username, String password);

---

- UserService에 로그인 메서드 생성

• 로그인시 조회만 하더라도 Transactional을 사용하여 정합성 유지.
• readOnly = true를 사용하여 Select할때 트랜잭션 시작, 서비스 종료시 트랜잭션 이 종료한다.

	@Transactional(readOnly = true) // Select 할 때 트랜잭션 시작, 서비스 종료시에 트랜잭션 종료 (정합성)
	public User 로그인(User user) {
		return userRepository.findByUsernameAndPassword(user.getUsername(), user.getPassword());
	}

---

- header.jsp를 수정하여 로그인 된 경우 헤더 변경

JSTL을 사용해야 하므로 설정 필요

JSTL 설정

1. porm.xml에 JSTL 추가

	<!-- JSTL -->
		<dependency>
		  <groupId>javax.servlet</groupId>
		  <artifactId>jstl</artifactId>
		  <version>1.2</version>
		</dependency>

2. header.jsp에 JSTL 라이브러리 추가

1. JSTL tutorial 검색 후 들어가기
2. Core Tags 라이브러리 코드 복사

라이브러리 코드

<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>

header.jsp에 라이브러리 넣고 사용

로그인 성공한 경우 메뉴바를 변경 (c:choose로 c:when, c:otherwise를 사용한다.)

<!-- if ~ else 문법, 맞다면 c:when, 아니면 c:otherwise -->
	<c:choose>
		<c:when test="${empty sessionScope.principal}">
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link" href="/blog/user/loginForm">Login</a></li>
			<li class="nav-item"><a class="nav-link" href="/blog/user/joinForm">Sign up</a></li>
		</ul>
		</c:when>
		<c:otherwise>
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link" href="/blog/board/writeForm">글쓰기</a></li>
			<li class="nav-item"><a class="nav-link" href="/blog/user/userForm">회원정보</a></li>
			<li class="nav-item"><a class="nav-link" href="/blog/user/logout">Logout</a></li>
		</ul>
		</c:otherwise>
	</c:choose>