역할 및 액세스 별 인터페이스

1) 원칙

1. 보안 = UX 작업. 사용자는 "회색 영역" 없이는 할 수있는 것과 할 수없는 것을 명확하게 이해해야합니다.

2. 최소 필요한 권리. 디스플레이에서 동작에 이르기까지 모든 것이 역할 작업으로 제

3. 금지 대신 신호. 액세스 할 수없는 경우 이유와 방법 (요청, 신청, 교육) 을 설명합니다.

4. 서버에서의 복제. UI 가드는 서버 검사를 대체하지 않습니

5. 투명한 감사. 각각의 민감한 행동은 읽을 수있는 표시를 남깁니다.

2) 액세스 제어 모델

RBAC (역할 기반): 고정 역할: 플레이어, 지원, 재무, 위험/준수, 제휴 관리자, 중재자, 관리자.
ABAC (속성 기반): 속성 기반 정책 (관할권, 브랜드, 시간대, VIP 수준, 팀, 교대).
ReBAC (Relationship-Based): 관계 별 액세스 (플레이어 처리기, 티켓 소지자, 파트너 관리자).
SoD (직무 분리) - 중요한 작업의 분리 (생성 된 면허 승인).

실습: 기본으로서의 RBAC, 미세 튜닝을위한 ABAC (브랜드/지역), 금융/제한을위한 SoD, ReBAC - 포인트 (선별 된 포트폴리오).

3) 역할 별 기능 맵 (예: iGaming)

4) 권리와 역할에 대한 UX 패턴

4. 1 탐색 및 가시성

탐색 (노이즈 감소) 에서 액세스 할 수없는 섹션을 숨기지 만 가능성을 이해하는 데 도움이되는 경우 정보 "빈" 카드를 표시합니다.
일시적으로 사용할 수없는 경우 - 힌트가있는 "잠금": 이유, 요구 사항, CTA "요청 액세스".

4. 2 가지 행동 상태

장애인 + 툴팁: "재무 역할이 필요합니다. 요청 액세스.
읽기 전용 모드: "유리 아래" 필드, "읽기 전용" 명시 적 마커.
에스컬레이션-신청 대신 승인을 위해 제출을 클릭하십시오.

4. 3 마스킹 및 편집

PII (이메일, 전화, 주소) - 'user @.', 다른 사람들의 기록을위한 '+ 380 90'.
PAN/IBAN-토큰 만/마지막 4.
전체 라디오 버튼 보이기 - 감사 이벤트에 의해서만 역할 소유.

5) UI의 허가 아키텍처

클라이언트의 정책 컨텍스트: 허가 캐시 (TTL 쇼트) + 업데이트 가입.
경로 경비원: 설명 및 CTA와 함께 액세스 할 수없는 라우트 → 403 페이지.
구성 요소 보호기: 'Can ({동작:' cantil _ inside ', 리소스:' payout '})'.
Ficheflags: 실험적/계절적 사물-권리와는 별개입니다.

(PHP 3 = 3.0.6, PHP 4)

tsx type Permission = string; // 'payout.approve', 'kyc.view_masked'
type Policy = { has:(p:Permission)=>boolean };
const PolicyCtx = React.createContext<Policy>({ has:()=>false });
export const Can: React.FC<{perm:Permission, children:React.ReactNode, fallback?:React.ReactNode}>
= ({perm, children, fallback=null}) => {
const { has } = React.useContext(PolicyCtx);
return has(perm)? <>{children}</>: <>{fallback}</>;
};

6) 서버> 클라이언트

모든 작업은 마크 (역할, 속성) 가있는 토큰으로 서버에서 확인합니다.
정책은 중앙 집중화되어 있으며 (PDP/OPA/Cedar/Zanzibar와 같은) UI는 솔루션 만 얻습니다.
모든 중요한 작업-2 단계 확인 + 감사.

7) 마스킹 및 빨간색 데이터 영역

• PII: 이름, 이메일, 전화, 주소, 생년월일.
• 금융: PAN/IBAN/crypto 지갑, 금액, 한도, 보너스 잔액.
• 문서: 여권/ID/셀카 (KYC).
• 게임: 베팅 기록/상금/패턴.

• 전체 소유 역할/레코드 소유자.
• 가면-지원, 재무 (소유자가 아님).
• 집계 - 분석 (ID 없음).

tsx function Redact({text, perm}:{text:string, perm:Permission}){
const { has } = React.useContext(PolicyCtx);
return <span>{has(perm)? text: text.replace(/.(?=.{4})/g,'•')}</span>;
}

8) 승인 및 SoD 흐름

네 눈: 개시자

다단계 경로 (예: 금액> X → 2 줄).
응용 프로그램의 유효성, SLA, 에스컬레이션.
잡지: 누가, 누가 변경했는지, 누가 승인했는지, 언제 어디서 왔는지.

예: 철회 확인, 플레이어 제한 변경, KYC 평결, 제재 깃발 제거.

9) iGaming의 세부 사항

한계 및 자체 제외: SoD 및 필수 사용자 알림으로 만 변경하십시오.
KYC/AML: 문서 액세스 - 좁은 역할; 로그를 사용하여 별도의 동작으로 전체 크기의 미리 보기.
제재/RAP 플래그: 위험 팀이 볼 수 있음; 지원 - 상태 "확인이 필요합니다".
결제/출력: 사후/거부-재무 회계 역할 만; 이중 확인 인 임계 값을 초과합니다.
베팅 로그: 읽기 지원하지만 편집하지 않습니다. 조정-조사와 별도의 기능.

10) 현지화, A11y, RTL

"액세스 없음" 텍스트는 현지화되어 있으며 유효한 경로 (응용 프로그램/교육) 를 포함합니

초점 제어: 설명없이 사용자를 "빈" 페이지로 전송하지 마십시오.
RTL 모드는 각 지역의 역할에 대해 지원됩니다.
A11y: 'aria-disabled' + 설명, 키보드 에스컬레이션 가용성.

11) 조건 및 오류

403 (무시할 수없는): 역할 컨텍스트 및 "요청 액세스" CTA가있는 친근한 페이지.
404 (리소스 없음): 숨겨진 객체의 존재를 나타내지 마십시오.
413/422 (너무 많은/검증): 정책 세부 정보를 유출하지 말고 중립적으로 공식화하십시오.
속도 제한/잠금: 타이머/잠금 해제 조건을 설명하십시오.

12) 메트릭

액세스 거부 속도: 역할/화면 별 오류율 (나쁜 IA 또는 정책 신호).
승인 SLA: 흐름 별 평균 승인 시간 (출력, 한계, KYC).
마스크 공개 이벤트: PII "공개" 비율 (작고 정당화 될 것으로 예상).
오류 해결: 403에서 부여 된 액세스까지의 시간.
최소 특권 드리프트: 중복 권한이있는 역할 (사용에 의한 탐지 가능성).

13) 반 패턴

"아무 일도 없음" 에서 오류를 숨깁니다.
설명없이 빈 단추를 보여줍니다.
자신의 데이터로 소유자를 마스크하십시오.
서버 정책이없는 UI 보호대를 사용하십시오.
액세스 (다른 작업) 와 ficheflag를 혼합하십시오.
편의를 위해 "신 모드" 를 지원하십시오.

14) 디자인 시스템 토큰 (예)

json
{
"access": {
"badge": { "viewer":"#607D8B", "editor":"#4CAF50", "approver":"#FF9800", "admin":"#9C27B0" },
"lockColor": "#9E9E9E",
"maskChar": "•"
},
"states": {
"noAccess": { "bg":"var(--bg-elev)", "border":"var(--border)", "icon":"#9E9E9E" },
"approval": { "pending":"#FFC107", "approved":"#4CAF50", "rejected":"#F44336" }
},
"a11y": { "ariaDisabled": true, "explainDenial": true }
}

15) 스니펫 UI

tsx import { Navigate, Outlet } from 'react-router-dom';
function GuardedRoute({perm}:{perm:Permission}){
const { has } = React.useContext(PolicyCtx);
if (has(perm)) return <Outlet/>;
return <Navigate to={`/403?perm=${encodeURIComponent(perm)}`} replace/>;
}

html
<article class="no-access">
<h3>Недостаточно прав</h3>
<p>Доступ к разделу «Выплаты» доступен ролям: Финансы/Админ.</p>
<button class="btn" data-open-request>Запросить доступ</button>
</article>

json
{
"ts": "2025-11-03T18:45:12Z",
"actor": "u_5412",
"action": "payout.approve",
"target": "withdraw#w_91822",
"ip": "194...12",
"result": "success"
}

16) QA 체크리스트

탐색 및 IA

• 사용할 수없는 섹션은 메뉴에서 노이즈를 만들지 않습니다.
• CTA가있는 명확한 "액세스 없음" 페이지/카드가 있습니다.

행동과 경비원

• 권리가없는 단추- '비활성화' + 툴팁/텍스트.
• 경로 보호; 설명과 함께 직접 맵 → 403.
• 서버는 각 작업을 확인합니다.

데이터

• PII/PAN/KYC는 정책에 의해 가려져 있습니다.
• "공개" 로그가 작성 및 검토됩니다.
• 수출/보고서는 역할 (분석을위한 집계) 에 해당합니다.

SoD/승인

• 개시자는 그의 신청을 승인 할 수 없습니다.
• 임계 값 → 다단계 경로.

지역/현지화

• "액세스 없음" 이 현지화되었습니다. 키보드 내비게이션이 작
• 대조/초점 링은 AA에 해당합니다.

신뢰성

• TTL이 짧은 허가 캐시; 역할을 바꿀 때 장애.
• PDP 드롭 → UI는 기본 안전 모드입니다.

17) 설계 시스템의 문서

보호자: 'GuardedRoute', 'Can', 'NoAccessCard', 'ApprovalBanner', 'Redact'.
정책: 역할/행동 행렬, SoD 규칙, 마스킹 수준.
프로세스: 액세스 요청, 역할 교육/인증, N 주마다 한 번씩 권리 개정.
Do/Do n 't gallery: "이유없이 빈 버튼", "소유자에게 변장", "서버 확인이없는 UI" 대 "설명 된 제한 및 CTA".

간단한 요약

역할 인터페이스는 명확한 정보 아키텍처 + 엄격한 정책 + 친근한 설명입니다. 필요한 것만 보여주고, 민감한 데이터를 숨기고, 경비원과 경로와 행동을 보호하고, 감사의 모든 중요한 사건을 기록하고, 돈과 규정 준수에 영향을 미치는 책임을 공유하십 iGaming에서는 위험을 줄일뿐만 아니라 팀을 더 빠르고 차분하게 만듭니다.