Springboot - 전통적인 방식의 로그인

시큐리티를 사용하기 전

세션을 이용한  전통적인 로그인 방식

 

 

 

loginform.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>
<form >
  <div class="form-group">
    <label for="username">아이디:</label>
    <input type="text" class="form-control" placeholder="아이디를 입력하세요" id="username">
  </div>
  
  <div class="form-group">
    <label for="pwd">비밀번호:</label>
    <input type="password" class="form-control" placeholder="비밀번호를 입력하세요" id="password">
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
</form>
  <button id="btn-login" class="btn btn-primary">로그인</button>

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

<script scr="/js/user.js"></script>

 

->

user.js

let index={
	init:function(){
		$("#btn-save").on("click",()=>{ //화살표 함수를 쓰는이유 this를 바인딩 하기 위해서
			this.save();
		});
		$("#btn-login").on("click",()=>{ //화살표 함수를 쓰는이유 this를 바인딩 하기 위해서
			this.login();
		});
	}
	,
	save:function(){
		//alert('user의 save함수 호출 됨')
		
		let data ={
			username: $("#username").val(),
			password: $("#password").val(),
			email: $("#email").val
		};
		
		//console.log(data);
		// ajax 호출시 default가 비동기 호출
		// ajax 통신을 이용해서 3개의 데이터를 json으로 변경하여 요청
		$.ajax({
			//회원가입 수행 요청
			type:"POST",
			url:"/api/user",
			data: JSON.stringify(data), // http body 데이터
			contentType:"application/json; charset=utf-8", //body 데이터가 어떤 타입인지(MIME)
			dataType: "json" // 요청을 서버로해서 응답이 왔을 때 기본적으로 모든것이 문자열
		}).done(function(resp){
			alert("회원가입이 완료되었습니다.");
			console.log(resp);
			location.href="/"
			
		}).fail(function(error){
			alert(JSON.stringify(error));
			
		}); //ajax 통신을 이용해서 3개의 데이터를 json으로
		//변경하여 insert 요청!!
	},
	login:function(){
		//alert('user의 save함수 호출 됨')
		
		let data ={
			username: $("#username").val(),
			password: $("#password").val(),
			
		};
		
		//console.log(data);
		// ajax 호출시 default가 비동기 호출
		// ajax 통신을 이용해서 3개의 데이터를 json으로 변경하여 요청
		$.ajax({
			//회원가입 수행 요청
			type:"POST",
			url:"/api/user/login",
			data: JSON.stringify(data), // http body 데이터
			contentType:"application/json; charset=utf-8", //body 데이터가 어떤 타입인지(MIME)
			dataType: "json" // 요청을 서버로해서 응답이 왔을 때 기본적으로 모든것이 문자열
		}).done(function(resp){
			alert("로그인이 완료되었습니다.");
			console.log(resp);
			location.href="/"
			
		}).fail(function(error){
			alert(JSON.stringify(error));
			
		}); //ajax 통신을 이용해서 3개의 데이터를 json으로
		//변경하여 insert 요청!!
	}
}

index.init();

ajax 통신을 이용!

url = /api/user/login

 

->

 

UserApiController.java

@Autowired
	private UserService userService;
	
	@Autowired
	private HttpSession session;

@PostMapping("/api/user/login")
	public ResponseDto<Integer> login(@RequestBody User user ){
		System.out.println("login 호출 됨 ");
		User principal = userService.로그인(user);
		//principal (접근주체)
		if(principal != null) {
			session.setAttribute("principal", principal); //세션 만듬
			
		}
		
		return new ResponseDto<Integer>(HttpStatus.OK.value(),1);
	}

UserService의 로그인 메서드 수행한 로직이

null 이 아니면

세션을 만들어

로그인 로직을 수행!!

 

 

UserService.java

@Autowired
	private UserRepository userRepository;
    
@Transactional(readOnly =true) 
	public User 로그인(User user) {
		
		return userRepository.findByUsernameAndPassword(user.getUsername(), user.getPassword());
		
	}

 

설정한 세션 값을 이용해

 

header.jsp

 

<div class="collapse navbar-collapse" id="collapsibleNavbar">
			<c:choose>
				<c:when test="${empty sessionScope.principal}">
					<ul class="navbar-nav">
						<li class="nav-item"><a class="nav-link"
							href="/loginform">로그인</a></li>
						<li class="nav-item"><a class="nav-link"
							href="/joinform">회원가입</a></li>
					</ul>
				</c:when>
				<c:otherwise>

					<ul class="navbar-nav">
						<li class="nav-item"><a class="nav-link"
							href="/board/form">글쓰기</a></li>
						<li class="nav-item"><a class="nav-link"
							href="/user/form">회원정보</a></li>
							<li class="nav-item"><a class="nav-link"
							href="/logout">로그아웃</a></li>
					</ul>
				</c:otherwise>

			</c:choose>
		</div>

화면 구성