블로그 프로젝트 전통적인 방식의 로그인 방법

폼은 지난번에 만들어둔 loginForm을 활용하고 Ajax 코드도 회원가입 코드를 복사해서 수정 후 활용할 것이다.

 

1. 로그인 버튼 수정

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

 

2. User.js 에 로그인 코드 작성

 let index = {
	init: function(){
		$("#btn-save").on("click",()=>{	//function(){} 대신 ()=>{} : this를 바인딩하기 위해서
			this.save();
		});
		
		$("#btn-login").on("click",()=>{	//function(){} 대신 ()=>{} : this를 바인딩하기 위해서
			this.login();
		});
	},
    
login: function(){
		//alert('user의 save함수 호출됨');
		let data = {
			username: $("#username").val(),
			password: $("#password").val(),
		};
		
		$.ajax({
			//로그인 수행 요청
			type: "POST",
			url: "/api/user/login",
			data: JSON.stringify(data),		//http body 데이터
			contentType: "application/json; charset=utf-8",	//body 데이터가 어떤 타입인지(MIME)
			dataType: "json"	//요청을 서버로 해서 응답이 왔을 때 기본적으로 모든 것이 문자열(String)=>javascript 오브젝트로 변경 
			//응답 결과가 정상일 때
		}).done(function(resp){
			alert("로그인이 완료되었습니다.");
			location.href="/";
			//실패일 때
		}).fail(function(error){
			alert(JSON.stringify(error));
		});	
		
	}

 

3. 컨트롤러에 로그인 코드 작성

• HttpSession을 사용하여 로그인 정보를 저장하고

• header.jsp에 session이 담긴 principal을 가져와서 아래와 같이 코드를 수정한다.
• 로그인 했을 때와 하지 않았을 때 메뉴바가 다르게 보이도록 구현한다.

 

4. 로그인 테스트

• 테스트용으로 회원가입을 해서 유저를 생성하고

 

• 생성한 아이디, 비밀번호로 로그인을 해보면 로그인 성공 메시지가 뜬다.

 

• 로그인 진행 쿼리문

 

• 로그인 완료 시 메뉴바

 

• 로그인하지 않았을 때 메뉴바