현재 게시판에는 삭제 버튼이 없습니다. 게시글을 아무나 삭제하면 안 되기 때문에 사용자 권한에 따라서 삭제할 수 있게 코드를 작성해줍니다.

테이블 수정

role 테이블에 ROLE_ADMIN을 추가해줍니다.

user_role 테이블에 사용자와 ADMIN 권한을 매핑해줍니다.

ADMIN 권한도 적용 되는 모습을 확인할 수 있습니다.

회원가입 버튼을 눌러 새로운 사용자를 만든 후 권한을 확인해보면 ADMIN 권한 없이 USER 권한만 가지고 있는 것을 확인할 수 있습니다.

삭제 버튼 추가

삭제 버튼을 관리자가 접속한 경우에만 표시되도록 작성해줍니다.

form.html을 수정해줍니다.

<div sec:authorize="hasRole('ROLE_ADMIN')">
  This content is only shown to administrators.
</div>

ROLE_ADMIN 권한을 가지고 있는 사용자에게만 표시되는 코드입니다.
이 코드를 활용해서 수정을 해줍니다.

<button type="submit" class="btn btn-primary" sec:authorize="hasRole('ROLE_ADMIN')">삭제</button>

123으로 로그인을 하게 되면 관리자 권한을 가지고 있기 때문에 삭제 버튼이 표시가 되고, kkk로 로그인을 하게 되면 관리자 권한이 없기 때문에 삭제 버튼이 표시되지 않습니다.

지금 상태에서는 삭제 기능이 없는 그냥 버튼입니다. 삭제 기능을 추가해줍니다.
삭제 기능은 JavaScript 기능을 이용해서 처리를 해줍니다.

<button type="submit" class="btn btn-primary" sec:authorize="hasRole('ROLE_ADMIN')" th:onclick="|deleteBoard(*{id})|">삭제</button>

th:onclick을 사용해줍니다.
|로 감싸게 되면 변수를 사용할 수 있습니다.

현재 프로젝트에서는 JQuery에 slim을 사용하고 있습니다. slim은 페이지 로드가 빠르지만 기능이 적기 때문에 이것을 일반 JQuery로 바꿔줍니다.

src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>

위의 코드를 아래 코드처럼 변경해줍니다.

src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"

삭제 버튼을 누르게 되면

이러한 창이 뜨고 확인을 누르면 삭제가 됩니다.

<script>
    function deleteBoard(id) {
        //DELETE /api/boards/{id}

        if (confirm("정말 삭제하시겠습니까??") == true){    //확인

            $.ajax({
                url: '/api/boards/' + id,
                type: 'DELETE',
                success: function(result) {
                    // Do something with the result
                    console.log('result', result);
                }
            });

        }else{   //취소

            return false;

        }

    }
</script>

현재 상태에서 postman에 들어가서 DELETE 요청을 하면 삭제 처리가 되게 됩니다.
버튼만 가린다고 해서 실제로 금지할 수 있는 것이 아닙니다.
이를 막기 위해서는 서버단에서 권한 처리를 해줘야 합니다.

@Configuration
@EnableGlobalMethodSecurity(
  prePostEnabled = true, 
  securedEnabled = true, 
  jsr250Enabled = true)
public class MethodSecurityConfig 
  extends GlobalMethodSecurityConfiguration {
}

Baeldung 사이트에서 위의 코드를 가져와 사용해줍니다.
이를 사용하기 위해서 MethodSecurityConfig 클래스를 생성해줍니다.
메소드 수준에서 권한을 제어할 수 있게 해주는 코드입니다.

BoardApiController에 ADMIN 권한을 가진 사용자만 DELETE 요청을 할 수 있도록 해줍니다.

@Secured("ROLE_ADMIN")
    @DeleteMapping("/boards/{id}")
    void deleteBoard(@PathVariable Long id) {
        repository.deleteById(id);
    }

id가 18번인 게시글을 postman에서 DELETE 요청을 하게 되면 로그인 하라는 페이지가 응답하게 됩니다.

현재 script 부분이 모든 페이지에 들어가있습니다. 이 부분을 common에 따로 빼줍니다.

common.html을 수정해줍니다.

<footer th:fragment="footer">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"
                integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
                crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
                crossorigin="anonymous"></script>
    </footer>

이제 다른 html 파일에 아래 코드를 넣어주면 적용이 됩니다.

<footer th:insert="~{fragments/common :: footer}"></footer>

게시글을 수정할 때도 현재 접속한 사용자랑 글을 작성한 사용자가 일치할 때만 수정이 가능하도록 변경해줍니다.

<div class="text-right">
            <button type="submit" class="btn btn-primary" th:if="${#authentication.name == board.user.username}">확인</button>
            <a class="btn btn-primary" th:href="@{/board/list}">취소</a>
            <button type="submit" class="btn btn-primary" sec:authorize="hasRole('ROLE_ADMIN')" th:onclick="|deleteBoard(*{id})|">삭제</button>
        </div>

현재 이 창에서 123 사용자가 작성한 test를 들어가면

확인 버튼이 뜨지 않는 것을 확인할 수 있습니다.

하지만 kkk사용자가 작성한 글을 kkk사용자가 들어가게 되면 확인 버튼이 뜨고 수정을 할 수 있게 됩니다.