[Datatables] JS에서 button을 만들 경우, 권한 설정 방법

프로젝트를 하다보면 권한설정을 해야하는 경우가 많다.
현재 프로젝트에서는 로그인 할 때 주어지는 레벨이 총 4개가 있다. 이 중 최상위 레벨인 관리자만 접근할 수 있게 하는 button을 만들었다.

하지만 변수가 생겼다.
기존에는 jsp에서 html을 만들기 때문에 아래와 같은 방식으로 권한을 쉽게 줄 수 있었다.

<sec:authorize access="!hasRole('ROLE_4')">
                      .
                      .
                      .
</sec:authorize>

하지만 위의 방법으로는 js파일에 적용되지 않는다.

Datatable 라이브러리를 다뤄본 사람은 이 라이브러리만의 틀이 있다는걸 알 것이다.
아래의 방식으로 하면 Datatable js 파일에서 권한 설정을 할 수 있다.

✅ 먼저 jsp 파일에 권한체크를 해줄 수 있는 div를 임의로 만들어준다. 여기서 access는 각자 자신의 프로젝트에서 정한 파라미터로 넣어주면 된다.

 <sec:authorize access="hasRole('ROLE_1')">
                    <div id='checkUser' value='true'></div>
 </sec:authorize>

✅ Datatable로 button을 생성해주는 부분이다. div에 id값(checkLevel)을 넣어준다.

buttons: [{
            extend: 'excelHtml5',
            className: 'btn btn-sm btn-default',
            text: '<div data-toggle="modal" data-target="#..." id="checkLevel">
   			<i class="fa fa-upload"></i>' + 버튼이름 + '</div>'
            }]

✅ 위의 두 id값을 이용해 jquery함수를 만들어주면 된다.
브라우저 별 두가지 방법이 있다.
chrome, FireFox 가능

$("#aaa").ready(function() {
if($("#checkUSER").length == 0) {
        document.getElementsByClassName('dt-buttons')[0].children[1].remove()
    }
})

IE, chrome, FireFox 가능

$("#checkLevel").ready(function () {
    if ($("#checkUser").length == 0) {
        let reMov = document.getElementsByClassName('dt-buttons')[0].children[1];
        reMov.parentNode.removeChild(reMov);
    }
})

참고로 위의
$(document).ready( )는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미입니다.
jQuery 이벤트 메서드 중 하나이다.