화면에서 버튼권한 처리하기

버튼 권한처리에 대한 방법

 

방법1. 전달받은 권한에 따라 스크립트로 버튼 보임/숨김 처리하기 (또는 활성화/비활성화)

//javascript

const isAuthorized = [권한에 따른 true/false 값];

//권한이 있다면
if(isAuthorized) {
	jQuery('#button').show(); //버튼 보이기

//권한이 없다면
} else {
	jQuery('#button').hide(); //버튼 숨기기
}

 

해당 방법은 가장 쉬운 방법이지만 보안적으로 취약하기 때문에 권장하지는 않는 방법이다.

(개발자모드에서 조금만 수정하면 바로 보이게 하거나 활성화/비활성화 처리할 수 있기 때문)

 

 

 

방법2. 전달받은 권한에 따라 버튼을 스크립트로 html에 그려주는 방식

//javascript

const isAuthorized = [권한에 따른 true/false 값];

//권한이 있다면
if(isAuthorized) {
	jQuery('#buttonArea').append('<button >버튼</button>'); //버튼영역에 버튼 추가
}

 

 

 

방법3. 서버에서 권한에 따라 버튼을 html에 그려주는 방식

<!-- thymeleaf -->

<button th:if="${isAuthorized}" type="button">버튼</button>

 

jsp, thymeleaf 등과 같이 권한이 있는 경우에만 버튼이 그려지도록 처리할 수 있다.

(개발자모드에서도 버튼이 보이지 않기 때문에 보안적으로 좋은 방법)

 

 

 

방법4. 서버에서 권한에 따라 화면을 다르게 보여주는 방식

 

권한에 따라 별도의 페이지를 만들어 분리하기도 한다.

 

1개의 URL 이지만 웹컨트롤러에서 권한에 따라 보여줄 페이지를 컨트롤 하거나

아예 로그인할 때부터 URL이 다르게 처리하는 경우도 있다.

 

 

 

 

 

 

마치며

클라이언트에서만 동작하는 기능이라면 사실 개발자모드에서 어떻게서든 실행시킬 수 있다.

그러나 서버를 통해 권한을 체크할 수 있는 기능이라면

서버에서도 권한을 체크하는 로직을 넣어 이중으로 권한을 체크하는 것이 좋다.