nyximos.log

Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 05 로그인, 로그아웃 구현 본문

Programming/Spring Boot

Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 05 로그인, 로그아웃 구현

nyximos 2022. 8. 16. 17:35

Spring Boot + Gradle + MySQL + JPA + Thymeleaf  환경에서 간단한 CRUD 예제를 만들어보자
이번 포스팅에서는 로그인과 로그아웃을 구현해보자.
 

주요 기능

회원가입
로그인
게시글 등록
게시글 수정
게시글 삭제
게시글 조회 (일반 회원 조회수와 운영자 회원 조회수 따로 구분)
게시글 추천 

 

WebController

@GetMapping("/signin")
public String signin(){
    return "signin";
}

 

signin.html

<!DOCTYPE html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head th:replace="~{fragment/header::headerFragment(~{::title})}">
    <title th:text="로그인"></title>
</head>
<body>

<th:block layout:fragment="content">
    <h2>로그인</h2>
    <div>
        <form>
            <div>
                <div>아이디</div>
                <input id="id" type="text" name="id"/>
            </div>
            <div>
                <div>비밀번호</div>
                <input id="password" type="password" name="password"/>
            </div>
            <input class="btn-submit" type="submit" value="로그인">
        </form>
    </div>

</th:block>
</body>
</html>

 

 

 

서버를 켜서 아래와 같은 화면이 나오는지 확인해보자.

 

 

 

ApiController

@RestController
@RequestMapping("/api")
@RequiredArgsConstructor
public class ApiController {

    private final MemberService memberService;

    @PostMapping("/login")
    public ResponseEntity login(@RequestBody LoginDTO loginDTO){
        return memberService.login(loginDTO);
    }
}

 

MemberService

public interface MemberService {
    ResponseEntity signup(SignUpFormDTO formDTO);

    ResponseEntity login(LoginDTO loginDTO);
}

 

MemberServiceImpl

아래 코드를 추가해준다.

@Override
public ResponseEntity login(LoginDTO loginDTO) {

    Optional<Member> member = memberRepository.findById(loginDTO.getId());
    Member memberEntity = member.orElse(null);

    if (member==null){
        return new ResponseEntity("해당 아이디를 가진 회원이 존재하지 않습니다.", HttpStatus.OK);
    }

    if (memberEntity.getPassword().equals(loginDTO.getPassword())){
        return new ResponseEntity("success", HttpStatus.OK);
    } else {
        return new ResponseEntity("비밀번호가 일치하지 않습니다.", HttpStatus.OK);
    }

}

 

Member memberEntity = member.orElse(null);

member가 null일 경우 memberEntity에 null이 할당된다.

 

orElse()

Java 8부터 지원한 Optional 클래스에서 제공한다.

Optional 클래스 사용할 때 지정했던 Generic 타입 클래스 객체를 받아서 그 객체를 그대로 return

null이거나 아니어도 실행된다.

 

 

 

 

signin.html

아래 코드를 추가해준다.

<th:block layout:fragment="script">
    <script type="text/javascript">
        $(function () {
            $('.btn-submit').click((e) => {
                const id = $('#id').val();
                const password = $('#password').val();

                if (id == '') {
                    alert('아이디를 입력해주세요');
                    e.preventDefault();
                }
                if (password == '') {
                    alert('패스워드를 입력해주세요');
                    e.preventDefault();
                }

                if (id != '' && password !='') {
                    const path = 'http://localhost:8086/api/login';
                    const json = JSON.stringify({
                        'id': id,
                        'password': password,
                    });
                    $.ajax({
                        url: path,
                        type: 'POST',
                        contentType: 'application/json',
                        data: json,
                    }).done((response) => {
                        if (response == 'success') {
                            alert('로그인 성공')
                            localStorage.setItem('id', id);
                            location.href = "http://localhost:8086"
                        } else {
                            alert(response);
                        }
                    });
                }
            });
        });
    </script>
</th:block>

 

 

localStorage.setItem('id', id);

로그인이 성공한 경우 id를 localStorage에 저장한다.

 

 

web storage에는 로컬 스토리지(session storage)와 세션 스토리지(local storage)가 있다.

📌 session storage

웹 페이지의 세션이 끝날 때 저장된 데이터가 지워진다.

📌 local storage

웹 페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.

 

더 알아보고 싶다면 아래 포스팅을 참고하자.

 

https://www.daleseo.com/js-web-storage/

 

[자바스크립트] 웹 스토리지 (localStorage, sessionStorage) 사용법

Engineering Blog by Dale Seo

www.daleseo.com

 

 

 

 

서버를 켜서 로그인을 해보고 F12를 눌러서 검사창을 켜 확인해보자.

Application - LocalStorage

 

 

 

 

 

layout.html

body 태그의 젤 아래 추가해준다.

<script th:inline="javascript">
    function logout(){
        if (localStorage.getItem('id') != null) {
            localStorage.removeItem('id');
            alert('로그아웃 완료');
        } else {
            alert('로그인하세요!');
        }
    }
</script>

 

 

서버를 켜서 로그아웃을 해봅시다.

 

 

 

포스팅에서는 매우 간단히 구현했지만 로그인 상태에서도 다시 로그인을 할 수 있기 때문에

로그인 상태일때는 로그인 버튼이 보이지 않게, 로그아웃 상태일때는 로그아웃 버튼이 보이지 않게 구현 해보자.

 

 

 

 

저작자표시 변경금지

'Programming > Spring Boot' 카테고리의 다른 글

Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 07 글 조회, 링크연결  (0) 2022.08.26
Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 06 글 등록  (0) 2022.08.26
Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 04 타임리프 레이아웃, 회원가입 구현  (5) 2022.08.12
Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 03 데이터베이스 설계, 테이블 생성  (5) 2022.08.03
Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 02 Controller에서 데이터 반환  (0) 2022.08.01
'Programming/Spring Boot' Related Articles more