12. 권한에 맞는 화면 구성 및 API 호출

스프링부트를 이용해 권한 처리를 해보도록 함.

쓰기 버튼이 있음.

취소와 확인 버튼이 있음.

사용자 권한에 따라서 삭제 버튼을 만들어 볼 것이다.

현재 gildong에는 ROLE_ADMIN과 ROLE_USER가 있다.

권한 테이블에 사용자와 운영자 권한이 있음.

gildong이라는 사용자가 3번이다.

3번이 1번과 3번의 권한이 매핑되어 있다.

원래대로라면 본인이 삭제한 글을 본인이 삭제할 수 있지만, 간소한 테스트를 위해 ADMIN, 관리자만 삭제할 수 있도록 가정하겠다. 해당 화면이 form.html이다.

 

취소 버튼과 확인 버튼이 있다.

type 버튼을 지우고 삭제버튼 추가.

삭제 버튼이 생겼음.

gildong2로 로그인, 사용자인데도 삭제 버튼이 보임.

권한 처리를 해줘야 함.

해당 방법은 구글링을 통해 해보도록 함.

예제가 다 나옴.

지난번에는 로그인이 처리가 됐는지 안 됐는지를

isAuthenticated 메소드를 사용했다.

이번에는 권한을 사용해보도록 하겠다.

<div sec:authorize="hasRole('ROLE_ADMIN')">

유저에게는 안보인다.

어드민 권한이 있는 사람에게는 보인다. 그러나 실제로 삭제는 되지 않는다.

삭제까지 처리되도록 하겠다.

삭제같은 경우는 자바스크립트를 이용해서 처리하도록 함.

Ajax를 이용해볼 것이다.

onclick를 줘보도록 함.

deleteboard에 현재 board id를 줘야 함.

 

타임리프 문법을 이용해서 가져옴.

 

검색해서 가져옴

th:attr="onclick=|upload('${gallery}')|"

Thymeleaf 문서를 보면 뜻이 나와있음.

바로 감싸면 이 안에 String에서 자연스럽게 변수를 사용할 수 있음.

자동으로 String으로 감싸진다는 것임.

해당 안에 변수를 사용하고 뒤의 스트링과 연결이 됨.

쉽게 문법을 사용할 수 있음.

th:object에 {board}를 사용하고 있기 때문에 *{id}를 하게 되면 id를 가져오게 됨.

function을 하나 만들 것임.

잘 호출이 되는지 테스트

현재 id 1이 잘 호출됨.

실제로 삭제를 하기 위해서는 api컨트롤러를 호출해야 한다.

호출주소가 주석과 같을 것이다.

그러나 우리가 jquery의 slim.min을 사용중이다.

delete 샘플

$.ajax({
    url: '/script.cgi',
    type: 'DELETE',
    success: function(result) {
        // Do something with the result
    }
});

 

성공했을 때, result는 log만 찍어주도록 함.

result 스트링과 함께 result가 나옴.

해당 상태로 호출해보겠음.

함수가 호출이 안되고 있음.

왜냐하면 jquery의 slim을 쓰고 있기 때문임.

동일한 버전으로 가져올 것임.

"https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"

slim이 더 적은 자바스크립트 기능을 가지고 있다.

그러나 페이지 로딩이 빠르기 때문에 필요에 따라 슬림을 써도 된다.

여기서는 실제 전체 Jquery를 사용할 것이다

해당 자바스크립트가 모든 페이지에 들어가 있다.

common에 따로 빼겠다.

일단 삭제 테스트

삭제가 됐는데 페이지 이동을 안하고 있음.

이동할 경로를 적어주도록 할 것이다.

board/list로 이동

TEST를 작성하고 삭제해본다.

TEST가 삭제가 되고 목록으로 이동된다.

일반 유저로 로그인하면 삭제 버튼이 없음.

이런 식으로 처리를 하게 되면 delete요청만 하면 되기 때문에, postman이나 api호출하는 도구를 통해서 삭제를 할 수 있음.

지금은 100번 게시글이 없어서 삭제가 안된다.

80번인 게시글

아무 경고도 안뜸.

총 건수가 5로 줄었음.

버튼만 가린다고 해서 실제로 가려지지가 않음.

실제로 막기 위해서는 서버 단에서 처리를 해줘야 한다.

어노테이션 이용을 해서 설정을 할 수 있음.

해당 부분을 따로 설정을 해줘야 한다.

MethodSecurityConfig 클래스를 만들어줘야 한다.

복사하고 빨간 글씨 뜨는 것은 Alt+Enter로 처리.

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

어노테이션 사용할 준비가 됐음.

GlobalMethodSecurityConfiguration을 상속 받아서 사용.

기본적으로 Secured를 이용을 해서 BoardApiController에 어노테이션 작성.

Method 윗 부분에 해당 권한 작성.

ADMIN 사용자만 Delete호출이 가능함.

TEST 제목과 TEST 내용 작성.

로그인 하라는 페이지가 응답으로 왔다.

Method권한이 처리가 됐음을 확인.

gildong은 ROLE_ADMIN 권한이 있음.

삭제를 하게 되면 정상적으로 삭제가 됨을 확인.

gildong2로 테스트 진행.

지금 삭제 버튼을 보이지 않게 하였음.

기존에 있던 권한 설정을 지워 일반 유저도 보이도록 설정.

권한 체크를 했기 때문에 403 에러가 발생.

 

403에러는 Fobidden이다.

권한이 없기 때문에 접근이 안됐다.

 

권한에 따라 다시 삭제버튼이 보이도록 설정.

삭제 버튼이 있어도 실제적으로 권한이 없으면 동작을 안함.

사용을 할 수 없기 때문에 가려주는 것이 좋은 UI이다.

권한에 따른 삭제 처리를 함.

Script 부분이 겹치기 때문에 공통 부분으로 빼도록 하겠다.

빼는 것은 해당 부분을 가져오는 것.

footer라고 이름을 지어볼 것임.

해당 부분은 필요 없지만 따로 열었을 때 대비해서 저장.

common에 작성했음.

footer로 변경.

그리고 우리는 slim을 사용하고 있지 않다.

아까 form.html에 있는 전체 jquery를 불러올 것임.

주석처리.

모든 페이지에서 JS부분을 제거해도 됨.

form

register에서도 삭제

모든 페이지에서 정상적으로 작동하는지 확인.

deleteBoard가 정의가 안됐다고 함.

footer 닫아주는 태그를 작성해줘야 함.

이번에는 삭제가 됐음.

권한 처리와 함께 공통된 스크립트를 풋터로 빼서 정의 했음.

https://youtu.be/VuOydiUpHwk?si=BCNpUrwx0OUjezsh