[shop] 모달을 사용하여 로그인하기 (ajax 사용, ajax 사용 X)

 

1. 로그인 모달

	<div class="modal fade" id="login_modal" tabindex="-1"
		aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">

				<form action="/member/login" method="post">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">LOGIN</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal"
							aria-label="Close"></button>
					</div>

					<div class="modal-body">
						<label for="memberId" class="form-label">ID</label> 
						<input class="form-control" type="text" placeholder="아이디를 입력하세요"
							aria-label="default input example" name="memberId" id="memberId"> 
						<label for="memberPw" class="form-label">PW</label> 
						<input class="form-control" type="password" placeholder="비밀번호를 입력하세요"
							aria-label="default input example" name="memberPw" id="memberPw">
					</div>
					
                    
                  				 
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary"
							data-bs-dismiss="modal">close</button>
						<button type="submit" class="btn btn-primary" >login</button>
                        
                        					 <ajax사용 버튼>
						<button type="button" class="btn btn-primary" th:onclick='login();'>ajaxLogin</button>
						★submit은 ajax에서 사용하지 않음
					
                    </div>
				</form>
			</div>
		</div>
	</div>

 

2. js 설정하기

 

1) 로그인 창 닫고 다시 열었을 때 기존 작성 데이터 지우기

1. 로그인 성공과 실패 시 모달창

function isLoginFail(){
	로그인 모달창 실행 (true/false)
	const isLoginFail = document.querySelector('#isLoginFail').value;
	
	true일 때(로그인이 실패 했을 때) 모달창 실행
	if(isLoginFail == 'true'){
		const myModalAlternative = new bootstrap.Modal('#login_modal');
		myModalAlternative.show();
	
	}
    
	//강제로 닫기 myModalAlternative.hide();




2.모달창이 닫히고 새로 클릭했을 때 기존 데이터 지우기
const login_modal = document.querySelector('#login_modal');

	
	login_modal.addEventListener('hidden.bs.modal', function(event){
		
		<첫번째 방법>
		const logInputs = login_modal.querySelectorAll('input:not([type="submit"])');
		
		for(const logInput of logInputs){
			logInput.value = '';
		}	
	
		<두번째 방법>
		login_modal.querySelector('form').reset();
	
	});

 

2) 로그인 버튼 클릭 시 실행 (ajax 사용)

<button type="button" class="btn btn-primary" th:onclick='login();'>ajaxLogin</button>

function login() {
	(id 겹치는것 해소하기 위해서 특정 모달을 지정하여 모달안에서 id 선택)
	const member_id = login_modal.querySelector('#memberId').value;
	const member_pw = login_modal.querySelector('#memberPw').value;

	$.ajax({
		url: '/member/loginAjax', 요청경로
		type: 'post',
		data: {'memberId': member_id, 'memberPw': member_pw}, 필요한 데이터
		success: function(result) {		
		
		if(result){ 	true
			alert('환영합니다.');
			
			location.href='/item/list';		
		
		}
		else{	false
			alert('아이디 또는 비밀번호를 다시 확인해주세요.');
		}
				
		},
		error: function() {	
			alert('실패');
		}
	});

}

3. mapper /service

<select id="loginMember" resultMap="member">
SELECT MEMBER_ID
	, MEMBER_NAME
	, IS_ADMIN
FROM SHOP_MEMBER
WHERE MEMBER_ID = #{memberId}
AND	MEMBER_PW = #{memberPw}
	
</select>


로그인
	@Override
	public MemberVO loginMember(MemberVO member) {
		
		return sqlSession.selectOne("memberMapper.loginMember", member);
	}

4. controller

	로그인
	@PostMapping ("/login")
	public String loginMember(MemberVO member, HttpSession session) {		
		
		MemberVO loginInfo = memberService.loginMember(member);
		
		로그인 실패 시 null이 뜬다. 즉, 성공하면 null이 아니다! 
		if(loginInfo != null ) {
			session.setAttribute("loginInfo" ,loginInfo );
		
		}
		페이지 이동
		return "content/member/login_result";
	}
	

	로그인 ajax 방식으로 실행
	@ResponseBody
	@PostMapping ("/loginAjax")
	public boolean loginAjax(MemberVO member, HttpSession session) {		
		
		MemberVO loginInfo = memberService.loginMember(member);
		
		로그인 실패 시 null이 뜬다. 즉, 성공하면 null이 아니다! 
		if(loginInfo != null ) {
			session.setAttribute("loginInfo" ,loginInfo );	
		}
        
		데이터 보내기 (로그인 성공여부)
		return loginInfo == null ? false : true;
		(false 실패 true 성공 )
	}

 

5.로그인 결과 창 

<th:block sec:authorize="isAnonymous()">
	
	<script type="text/javascript">
		alert('로그인 실패');
		location.href = '/item/list?isLoginFail=true';
	</script>

</th:block>

<th:block sec:authorize="isAuthenticated()">
	<div sec:authorize="hasRole('ROLE_MEMBER')">	<!-- sec가 if역할을 함 -->
		<script type="text/javascript">
			alert('환영합니다.');
			location.href = '/item/list';
		</script>
	</div>
	
	<!-- 관리자 페이지  -->
	<div sec:authorize="hasRole('ROLE_ADMIN')">
		<script type="text/javascript">
			alert('관리자님 환영합니다');
			location.href = '/admin/main';
		</script>
	</div>
	

</th:block>