[홈페이지 제작] 회원가입 페이지 만들기 4 - 로그인 하기, 세션

Jan 30, 2024
[홈페이지 제작] 회원가입 페이지 만들기 4 - 로그인 하기, 세션
 
 
이전 블로그에서 데이터베이스를 연결해 회원가입을 했다.
 
이번에는 입력된 데이터를 가지고 로그인을 해보자.
 

1. 로그인

 
package shop.mtcoding.blog.user; import lombok.Data; import org.hibernate.annotations.CreationTimestamp; import javax.persistence.*; import java.time.LocalDate; //db에서 조회된 user 데이터베이스 값을 여기에 받음 @Data //Getter,Setter포함 @Entity // 이게 붙으면 테이블 생성됨 @Table(name="user_tb") // 테이블명 public class User { @Id // 프라이머리키 설정 @GeneratedValue(strategy = GenerationType.IDENTITY) //auto_increment private int id ; @Column(unique = true) // 유저네임은 유니크 private String username; @Column(length = 60,nullable = false) //비밀번호 길이는 60, null 불가 private String password; private String email; @CreationTimestamp private LocalDate createdAt ; }
 
User 클래스는 DB 를 통해 조회된 데이터를 받는 역할을 한다.
@Entity 는 컨포넌트 스캔 시 스캔되지 않아 객체가 생성되지 않는다. 그래서 JPA 를 사용해야 한다.
 
JPA 라이브러리
implementation 'org.springframework.boot:spring-boot-starter-data-jpa' //하이버네이트 기술 내장, @Entity 를 찾음. 보고 테이블 생성 쿼리를 만들어냄
 
 
@PostMapping("/login")// select 는 get 요청을 해야함. 하지만 로그인은 민감한 정보기 때문에 get 요청을 하면 쿼리스트링으로 오기 때문에 post 요청으로 함 public String login(UserRequest.LoinDTO requsetDTO){ // 유효성 검사 if(requsetDTO.getUsername().length()<3){ return "error/400"; } // 모델 연결 userRepository.findByUsernameAndPaaword(requsetDTO); return "redirect:/"; }
 
로그인을 할때 유효성 검사 후 UserRepository를 연결한다.
 
public User findByUsernameAndPaaword(UserRequest.LoinDTO requsetDTO) { Query query = em.createNativeQuery("select * from user_tb where username=? and password=?",User.class); //User.class 알아서 맵핑.@Entitiy여야 함. ResultSet해서 하나씩 파싱 안해도 됨. query.setParameter(1,requsetDTO.getUsername()); query.setParameter(2,requsetDTO.getPassword()); User user = (User) query.getSingleResult(); // getSingleResult()의 리턴값이 오브젝트라 다운캐스팅 return user ; }
 
UserRepository 에서는 select 문을 통해 DB에 데이터가 있는지 확인한다. getSingleResult 는 쿼리를 실행하고 , 단일 데이터를 반환하는 메서드이다.
 
User.class 는 User 클래스에 @Entity 가 되어있을 때 넣으면 자동으로 파싱이 된다.
 
notion image
 
💡
만약 join문을 써서 테이블을 합쳤다면 @Entity가 아니기 때문에 파싱이 되지 않는다. 이땐 QLRM 라이브러리를 사용해야 한다.
 
notion image
 
notion image
 
로그인이 완료되면 메인페이지로 리다이렉션 된다.
 

2. View에서 로그인 권한 설정

 
현재 네브바에
 
이렇게 조회가 된다. 로그인 하기 전과 후로 기능을 나눠보자.
 
{{#sessionUser}} //if문 <li class="nav-item"> <a class="nav-link" href="/board/saveForm">글쓰기</a> </li> <li class="nav-item"> <a class="nav-link" href="/user/updateForm">회원정보보기</a> </li> <li class="nav-item"> <a class="nav-link" href="/logout">로그아웃</a> </li> {{/sessionUser}} {{^sessionUser}} //else문 <li class="nav-item"> <a class="nav-link" href="/joinForm">회원가입</a> </li> <li class="nav-item"> <a class="nav-link" href="/loginForm">로그인</a> </li> {{/sessionUser}}
 
sessionUser 는 추후 컨트롤러에서 세션에 접근해 전달받은 데이터이다.
mustache 문법 중 오브젝트 타입으로 넘어온 데이터는 if-else 조건문으로 사용할 수 있다.
 
notion image
 

3. 세션 설정

 
세션에 대한 설명은 이전 블로그를 참고하면 된다.
 
 
세션은 반이중통신에서 클라이언트의 정보를 기억해 일정 기간 stateful 상태를 만들기 위해 사용한다.
 
notion image
 
현재 정상적으로 회원가입과 로그인이 완료되었으나, 페이지에서는 로그인이 되지 않는다.
 
notion image
 
이는 로그인이 완료가 되면 서버가 클라이언트에게 요청을 하고 통신이 종료되기 때문이다.
그래서 상태를 기억하기 위해 세션을 만들어야 한다.
 
spring: datasource: driver-class-name: org.h2.Driver url : jdbc:h2:mem:test;MODE=MySQL username : sa password : mustache: servlet: expose-session-attributes: true expose-request-attributes: true
 
우선 application-dev.yml 파일에 코드를 추가한다.
expose-session-attributes: true 는 mustache 에서 세션값을 노출 할지를 설정,
expose-request-attributes: true 는 mustache 에서 리퀘스트 값이 노출할지를 설정하는 코드이다.
 
public class UserController { private final UserRepository userRepository ; private final HttpSession session ; @PostMapping("/login")// select 는 get 요청을 해야함. 하지만 로그인은 민감한 정보기 때문에 get 요청을 하면 쿼리스트링으로 오기 때문에 post 요청으로 함 public String login(UserRequest.LoinDTO requsetDTO){ if(requsetDTO.getUsername().length()<3){ return "error/400"; } // 2. 모델 연결 User user = userRepository.findByUsernameAndPaaword(requsetDTO); if(user==null){ return "error/401"; }else { session.setAttribute("sessionUser",user); // setAttribute 해쉬맵 키 : 값 return "redirect:/"; // 메인으로 연결 } }
 
UserController 에 조건문을 추가한다. session.setAttribute("sessionUser",user) 은 유저 객체를 통해 세션에 접근하는 것을 뜻한다.
 
notion image
 
위의 코드를 추가 후 로그인을 하면 로그인 상태가 유지된다.
 
notion image
 
 
이때 검사를 진행하면 Cookies가 만들어져 있다.
쿠키는 클라이언트와 서버 간의 상태를 유지하고 정보를 저장하기 위해 사용된다.
 
웹 서버는 set-cookie 에 쿠키를 저장하고, 브라우저는 쿠키 저장소에 쿠키를 저장한다.
통해 클라이언트는 동일한 웹사이트를 방문할 때 이 정보를 사용할 수 있다.
 
Share article

{CODE-RYU};