Cooper's devlog

4-1. 로그인 기능 구현 본문

Programming/Spring-boot

4-1. 로그인 기능 구현

cooper_dev 2020. 7. 17. 02:01

4-1. 로그인 기능 구현

1. 강의링크

https://www.youtube.com/watch?v=-J9f_LQILCY&list=PLqaSEyuwXkSppQAjwjXZgKkjWbFoUdNXC&index=24

 


2. 학습목표

  • HttpSession을 활용해 로그인 기능을 구현

 


3. 과정

[1]UserController에서 메소드 생성

  • loginForm<String> : login.html로 페이지 이동 메소드 → 2-2 작업
  • login<String> : login 기능 구현 메소드 → 2-3 작업

userController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    @GetMapping("/loginForm")
    public String loginForm() {
        return "/user/login";
    }
    
    @PostMapping("/login")
    public String login(String userId, String password, HttpSession session) {
        User user = userRepository.findByUserId(userId);
        
        if(user == null) {
            System.out.println("Login Failure! ");
            return "redirect:/users/loginForm";
        }
        
        if(!password.equals(user.getPassword())) {
            System.out.println("Login Failure! ");
            return "redirect:/users/loginForm";
        }
        
        session.setAttribute("user", user);
        
        return "redirect:/";
    }
 

 

 

[2] html코드 수정

(1) template/include/footer.html 생성(중복 코드 작성 최소화

** 상대 경로가 아닌 절대경로로 설정해야 한다.

1
2
3
4
    <!-- script references -->
    <script src="/js/jquery-2.2.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/scripts.js"></script>
 

 

-F12들어가서 js파일 연동 확인하기

 

 

 

(2) navigation.html → '로그인' 부분 href 수정

navigation.html

(3) login.html form action 부분 수정

 

 

[3] 기능 구현 확인

(1) 회원가입 리스트

 

(2) 로그인 화면

 

(3) 로그인 완료 상태 확인

  • chrome(F12) → application → session 생성 여부 확인

 


4. 꿀팁

 

이클립스 단축키

ctrl + shift + w (켜져있는 창 모두 종료)

ctrl + shift + r (project 내에 있는 파일 불러오기)

ctrl + shift + t class 검색

ctrl + e (현재 열려있는 파일 이동)

Comments