쇼핑몰의 기능은 판매자와 구매자로 나누어 집니다.
브라우저에서 같은 메인 화면을 보더라도
- 판매자는 상품 등록, 수정, 삭제, 판매관리 등
- 구매자는 상품 구매, 장바구니, 마이페이지 등
의 기능을 사용할 수 있습니다.
AuthenticationEntryPoint 인터페이스 구현 클래스를 사용하여 인증되지 않은 사용자의 요청이 오면 "Unauthorized" 에러를 발생시키고, SecurityConfig 파일에서 HttpServletRequset 에 대해 security 를 처리하여 수행하는 방법이 있습니다. http.authorizeRequests.mvcMatchers("/seller/**").hasRole("ROLE_SELLER") 이런 식으로 작성하면 되지만 저는 이러한 방식이 아직은 어렵고 복잡하다고 느껴 스터디 팀원의 도움으로 감사하게도 조금 더 쉬운(?) 방식을 사용하여 권한을 설정하였습니다.
바로 Controller에서 if문을 활용하는 방식입니다.
이 방식은 유저 프로필 페이지에서 더 유용하게 쓰일 수 있으니 추후에 적용해 보아도 좋을 것 같습니다 :)
로그인을 하지 않은 유저, 구매자(ROLE_USER)로 로그인 한 유저, 판매자(ROLE_SELLER)로 로그인 한 유저로 각각 접속을 하면
<로그인 안 한 메인페이지>
<구매자 메인페이지>
<판매자 메인페이지>
이렇게 각각의 접근 권한에 따라 상단부의 메뉴 기능이 다른 메인페이지가 나와야 합니다.
로그인을 하지 않은 유저, 구매자(ROLE_USER)로 로그인 한 유저, 판매자(ROLE_SELLER)로 로그인 한 유저에 맞게 html 파일을 이렇게 3개 만들으면 됩니다.
사실 이렇게 파일을 나누면 중복되는 부분이 많습니다. 더 효율적인 방법으로는 main 이라는 html 파일 하나에 sec:authorize 을 써서 3개의 파일을 하나의 파일로 작성할 수도 있지만 이 방법은 조금 뒤에 설명하도록 하겠습니다.
// 메인 페이지 (로그인 안 한 유저) /localhost:8080
@GetMapping("/")
public String mainPageNoneLogin(Model model) {
// 로그인을 안 한 경우
List<Item> items = itemService.allItemView();
model.addAttribute("items", items);
return "/main";
}
// 메인 페이지 (로그인 유저) - 판매자, 구매자 로 로그인
@GetMapping("/main")
public String mainPage(Model model, @AuthenticationPrincipal PrincipalDetails principalDetails) {
if(principalDetails.getUser().getRole().equals("ROLE_SELLER")) {
// 어드민, 판매자
List<Item> items = itemService.allItemView();
model.addAttribute("items", items);
model.addAttribute("user", principalDetails.getUser());
return "/seller/mainSeller";
} else {
// 일반 유저일 경우
List<Item> items = itemService.allItemView();
model.addAttribute("items", items);
model.addAttribute("user", principalDetails.getUser());
return "user/mainUser";
}
}Controller에서 우선 로그인을 안 한 유저와 로그인을 한 유저로 나눌 수 있습니다. 그리고 또 로그인을 한 유저는 판매자와 구매자로 나누어집니다.
@AuthenticationPrincipal 어노테이션을 통해 PrincipalDetails 를 매개변수로 받습니다.
조건문으로 현재 로그인 한 유저의 role을 get 하여 비교합니다. return 문을 보면 판매자일 경우 mainSeller로, 구매자일 경우 mainUser로 가는 것을 볼 수 있습니다.
이 방식은 상품 등록, 수정, 삭제에도 동일하게 사용됩니다.
상품 등록, 수정, 삭제 기능은 role 이 ROLE_SELLER인 유저에게만 가능하게끔 해야 하기 때문입니다.
> sec:authorize
이제 sec:authorize 를 사용한 방식을 알아보겠습니다.
html에 sec:authorize를 사용하면 위처럼 main을 세 개로 나누지 않아도 됩니다. 먼저 main.html 파일 상단의 html 태그에
xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"타임리프를 넣어줍니다!
그리고 권한을 따로 줘야하는 곳에 가서 sec:authorize 를 넣어주면 되는데요, main에서 로그인 버튼은 로그인을 하지 않은 유저에게만 보여야 합니다. 따라서
<form th:action="@{/signin}" sec:authorize="!isAuthenticated()">
<button class="btn btn-outline-dark" type="submit">
로그인
</button>
</form>sec:authorize="!isAuthenticated()" 를 넣어주어 로그인을 하지 않았을 때 로그인 버튼이 보이도록 설정합니다.
로그아웃의 경우에는 로그인을 한 유저에게만 보여야 합니다. 따라서
<form th:action="@{/logout}" method="post" sec:authorize="isAuthenticated()">
<button class="btn btn-outline-dark" type="submit">
로그아웃
</button>
</form>sec:authorize="isAuthenticated()" 를 넣어주면 되겠지요!
이 외에 sec:authorize="hasRole('ROLE_USER')"과 sec:authorize="hasRole('ROLE_SELLER')" 도 있습니다.
예를 들어 상품 등록 버튼에는 ROLE_SELLER를, 마이페이지 버튼에는 ROLE_USER를 사용합니다.
이렇게 sec:authorize를 사용하면 html 파일을 나누어 관리하는 것이 아닌 하나의 파일에서 관리할 수 있어 편리합니다!
저는 처음에 이 기능을 몰라서 html을 여러개 만들어 하나를 고치면 다른 파일도 고쳐야 하는 번거로움이 있었는데, sec:authorize를 사용하여 더 수월하게 코드를 수정할 수 있을 것 같습니다 :)
