[📚상품 구매 사이트 4단계] MySQL DB 연결 없이 관리자 페이지 구현하기 - 2. 관리자 로그인 구현하기

⏬ 4단계 프로젝트 세팅 보러가기 (전체 코드) ⏬

[연습📚상품 구매 사이트 4단계] MySQL DB 연결 없이 관리자 페이지 구현하기 - 1. 프로젝트 세팅

 

---

 

 

관리자 로그인 기능을 구현할 것이다.

사실 구매자와 관리자 로그인 페이지를 따로 나눌 필요는 없고,

페이지 하나를 공유해서 써도 된다. (로그인 하고 나서의 화면만 다르면 되니까)

관리자는 회원가입 기능이 없고 DB 더미데이터에 넣어놓은 값으로만 로그인 가능하다.

관리자 회원가입이라는 말 자체가 이상함.

 

 

구매자 로그인은 3단계에 구현되어 있기에 생략하겠다🙄(똑같은 코드이다)

 

⏬ 구매자 로그인 기능 만들러 가기 ⏬

[연습📚상품 구매 사이트 3단계] 구매자 서버 만들기 - 3. header, footer, 로그인/로그아웃 구현

 

---

 

 

이전 단계들과는 다르게, USER 클래스에 role이라는 것이 추가되었다.

이 role은 일반 유저가 가입할 때 "직접" 입력하지는 않지만,

 

 

회원가입할 때 쓰는 insert 메서드에

무조건 role은 'USER'로 저장되게끔 만들어져 있기 때문에

DB에 무조건 일반 유저의 role값은 'USER'라고 저장될 것이다.

 

---

 

📺 화면 설계📺

 

 

adminLoginForm.jsp

 

당연한 소리이지만, 실제 서비스 할 때에는 input 태그 안에 value 값 넣어놓으면 안된다!!

나는 여러 번 테스트 해보는데 그 때마다 타자 치기 귀찮아서(...) 넣어놓았따

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ include file="../layout/header.jsp" %>

        <div class="container">
            <form action="/adminLogin" method="post" name="form">
            
                <div class="mb-3 mt-3">
                    <input type="text" class="form-control" placeholder="username" name="userName" value="admin" />
                </div>

                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="password" name="userPassword" value="1234" />
                </div>

                <button type="submit" class="btn btn-primary">
                    관리자 로그인
                </button>

            </form>
            
         </div>

        <%@ include file="../layout/footer.jsp" %>

 

---

 

🎤 코드 리뷰 🎤

 

전체 코드

 

 

페이지를 구분했기 때문에 관리자 DTO와 일반유저 DTO를 따로 만들어 주었다

 

DTO는 내용이 같더라도 따로따로 관리하는 게 좋다

(예를 들어, 나중에 admin에만 기능을 추가하게 되는 일이 있을 수 있으니까)

(근데 귀찮아서 안만들때도 많음....ㅎ..실무에선 꼭!! 따로따로 관리할 것!)

 

 

AdminLoginDto를 매개변수로 가져오고,

DTO 안에 userName과 userPassword를 가져와서 빈 칸인지 아닌지 유효성 체크를 한다

 

if (adminLoginDto.getUserName().isEmpty() || adminLoginDto.getUserPassword().isEmpty()) {

            throw new CustomException("username과 password를 입력해 주세요.", HttpStatus.BAD_REQUEST);

        }

 

이런 식으로 userName과 userPassword를 같이 적어줘도 되는데,

나는 개인적으로 홈페이지를 이용할 때 둘 중에 뭐가 틀렸는 지 알려주면 좋겠어서 따로따로 유효성 체크를 하게 만드는 편이다.

(사실 빈칸 확인하는 건 육안(?)으로도 잘 보이기 때문에 그럴 필요는 없겠다만은..)

 

 

adminLoginDto를 레파지토리의 adminLogin 메소드에 넣고 결과를 userPS에 담는다.

담은 userPS가 없지 않거나 (null이 아니거나 = 있다) + userPS의 role(권한)이 "ADMIN"이라면

세션에 userPS를 "principal"로 저장하고

로그인이 성공했으니 상품 목록 페이지("/product") 주소로 리다이렉트 해 준다.

 위 조건이 성립하지 않는다면, 없는 유저이거나 role이 "ADMIN"이 아니라는 뜻이므로

조건문 밖으로 빠져나와 다시 로그인 폼으로 보내준다. (CustomException으로 처리해줘도 된다.)

 

 

 

userRepositroy

adminLogin 메서드이다. DTO를 매개변수로 받는다.

 

user.xml

adminLogin 메서드는 받은 DTO의 userName과 DB의 userName과 일치하는지와

role이 'ADMIN' 인 것을 동시에 만족한다는 조건하에 user 테이블의 모든 컬럼값을 찾아주는 메서드이다.

일치하면 위 코드와 같이 세션에 로그인 정보가 저장되고, 상품 목록 페이지로 보내준다.

 

 

---

 

📊 결과 확인 📊

 

user 테이블엔 두 개의 USER 와 admin이라는 관리자 아이디가 하나 존재한다.

관리자 로그인 시도

잘 들어와짐!

 

 

관리자 로그인 페이지에 일반 USER 의 아이디와 패스워드를 입력하면

 

 

안넘어가지고 코드에 쓴 대로 로그인 페이지로 리다이렉트 됨.

(이 부분은 리다이렉트보다 alert창으로 처리하는 방법이 더 좋겠음!)