GRID FEATURE

셀 접근 제어

셀 읽기와 편집 정책은 사용자 역할에 따라 보이는 값과 수정 가능한 값을 제한합니다. 열을 숨기는 UI 설정과 데이터 접근 정책은 다릅니다.

동작 원리와 선택 기준

canReadCell과 canEditCell에 순수한 동기 콜백을 제공합니다. 필요한 권한 정보를 먼저 준비하고 콜백 안에서는 서버 요청 대신 이미 확인한 권한으로 판단합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 민감한 열 읽기 제한

canSeePrice는 앱이 인증 결과에서 얻은 boolean입니다.

javascript
grid.canReadCell = params => params.field !== 'price' || canSeePrice;

결과 확인: 읽기 제한이 표·툴팁·복사·내보내기 등 값이 노출되는 경로에도 일관되게 적용되는지 확인합니다.

예제 2. 완료 주문 수정 제한

업무 상태에 따라 편집 가능 여부를 계산합니다.

javascript
grid.canEditCell = params => params.data?.status !== '완료';

결과 확인: 열이 editable이어도 완료된 주문은 정책에 따라 편집이 제한됩니다. 앱의 역할 규칙과 함께 사용할 수 있습니다.

예제 3. 권한 변경 후 화면 전환

사용자 역할이 바뀌면 새 정책 함수를 지정하고 기존 열림 메뉴·편집·상세 화면에서 비밀 값이 남아 있지 않은지 확인합니다.

결과 확인: 브라우저 정책과 별개로 서버가 모든 읽기·수정 요청의 권한을 다시 검사해야 합니다. 브라우저에 전송한 비밀 데이터를 UI만으로 안전하게 회수할 수는 없습니다.

조합할 때와 문제를 해결할 때

비동기 Promise를 boolean 정책 자리에 반환하지 마세요. 권한 조회가 끝날 때까지 보수적인 정책을 사용합니다.

권한 없는 값이 앱의 콘솔·로그·이벤트 패널에 노출되지 않게 주변 코드도 함께 점검합니다.

함께 읽기