Рөлдер мен рұқсаттар бойынша интерфейстер
1) Қағидаттар
1. Қауіпсіздік = UX-міндет. Пайдаланушы «сұр аймақсыз» не істей алатынын және істей алмайтынын анық түсінуі тиіс.
2. Ең аз қажетті құқықтар. Бейнелеуден әрекеттерге дейін - барлығы рөл тапсырмаларымен шектелген.
3. Тыйым салу орнына сигнал. Егер қолжетімділік болмаса - неге және қалай алуға болатынын түсіндіреміз (сұрау салу, өтінім, оқыту).
4. Серверде қайталау. UI-гвардтар серверлік тексерулерді ешқашан алмастырмайды.
5. Мөлдір аудит. Әрбір сезімтал әрекет оқылатын із қалдырады.
2) Кіруді басқару модельдері
RBAC (Role-Based): бекітілген рөлдер: Ойыншы, Саппорт, Қаржы, Тәуекел/Комплаенс, Аффилиат-менеджер, Модератор, Әкімші.
ABAC (Attribute-Based): атрибуттар негізіндегі саясат (юрисдикция, бренд, уақыт белдеуі, VIP деңгейі, команда, ауысым).
ReBAC (Relationship-Based): қатынас бойынша қолжетімділік (ойыншының кураторы, тикет иесі, серіктес менеджері).
SoD (Segregation of Duties): сындарлы міндеттерді бөлу (құрған ≠ бекіткен).
Практика: RBAC базис ретінде, ABAC (бренд/өңір), SoD қаржы/лимиттер үшін, ReBAC - нүктелі (қадағаланатын портфельдер).
3) Рөлдер бойынша функциялар картасы (iGaming мысалы)
4) Құқықтар мен рөлдерге арналған UX-үлгілер
4. 1 Навигация және көріну
Навигациядан қол жетімді емес бөлімдерді жасырыңыз (шуды азайту), бірақ мүмкіндіктерді түсінуге көмектесетін болса, «бос» карталарды көрсетіңіз.
Уақытша қол жетімсіз үшін - «Құлып»: себебі, талаптары, CTA «Қол жеткізуді сұрату».
4. 2 Әрекеттер күйі
Disabled + tooltip: "Қаржы рөлі талап етіледі. Қатынас сұраңыз".
Read-only режимі: «шыны астындағы» өрістер, «Тек оқу» айқын таңбасы.
Эскалация: «Қолдану» орнына «Бекітуге жіберу» түймешігі.
4. 3 Бүркемелеу және редакциялау
PII (email, телефон, мекенжай) - 'user @.', '+ 380 90' басқалардың жазбалары үшін.
PAN/IBAN - тек токендер/соңғы 4.
«Толық көрсету» қосқышы - тек қана рөлді иеленуші үшін/аудит оқиғасы бойынша.
5) UI рұқсаттар архитектурасы
Клиенттегі Policy контекст: рұқсат кэші (TTL қысқа) + жаңарту жазылымы.
Маршруттардың гварды: қол жетімді емес роуттар → 403-бет түсіндірме және CTA.
Құрауыштардың шегендері: 'Can ({action:' approve _ withdrawal ', resource:' payout '})'.
Фичефлагтар: эксперименттік/маусымдық заттар - құқықтардан бөлек.
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 тек шешімді алады.
Барлық күрделі операциялар - екі факторлы растау + аудит.
7) Бүркемелеу және деректердің қызыл аймақтары
Деректер санаттары:- PII: аты, email, телефоны, мекенжайы, туған күні.
- Қаржы: PAN/IBAN/крипто қапшықтар, сомалар, лимиттер, бонустық баланстар.
- Құжаттар: паспорттар/ID/селфи (KYC).
- Ойын: ставкалар/ұтыстар/паттерндер тарихы.
- Толық - рөлге ие/жазбаның иесі.
- Бүркемеленген - саппорт, қаржы (иесі емес).
- Біріктірілген - талдау (сәйкестендіргіштерсіз).
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) Бекіту ағындары (Approvals) және SoD
Төрт көз: бастамашы ≠ бекітуші.
Көп сатылы бағыттар (мысалы, сомалар> X → 2-ші сызық).
Өтінімдердің, SLA, эскалацияның қолданылу мерзімі.
Журнал: кім құрды, кім өзгертті, кім бекітті, қашан және қайдан.
Мысалдар: шығаруды растау, ойыншының лимиттерін өзгерту, KYC үкімі, санкциялық жалауды алып тастау.
9) iGaming ерекшелігі
Лимиттер және өзін-өзі жою: өзгерту тек SoD және пайдаланушының міндетті хабарламасымен.
KYC/AML: құжаттарға қол жеткізу - тар рөл; миниатюраларды алдын ала қарау, толық өлшем - логмен жеке әрекет бойынша.
Санкциялық/РЕР-жалаулар: тәуекел-командаға көрініп тұрады; саппорт - тек «тексеру қажет» мәртебесі.
Төлемдер/қорытындылар: «жүргізу/қабылдамау» - тек Қаржы рөлі; шектен жоғары сомалар - қосарланған растау.
Ставкалар журналы: саппорт оқиды, бірақ редакцияламайды; түзетулер - тексеруі бар жеке функция.
10) Локализация, A11y, RTL
«Қолжетімділік жоқ» деген мәтіндер оқшауланады және қолданыстағы жолдардан тұрады (өтінім/оқыту).
Фокусты басқару: пайдаланушыны түсіндірмей «бос» бетке ауыстыруға болмайды.
RTL режимі тиісті өңірлердегі рөлдер үшін қолдау тапты.
A11y: 'aria-disabled' + түсіндірме, эскалацияның пернетақталық қолжетімділігі.
11) Жай-күйлер мен қателер
403 (рұқсат жоқ): рөлі және CTA мәтіні бар достық бет «Қатынасуға сұрау салу».
404 (ресурс жоқ): жасырын нысандардың бар екенін ашпау.
413/422 (тым көп/валидация): саясаттың бөлшектерін біріктірмеңіз, бейтарап тұжырымдаңыз.
Rate-limits/бұғаттау: таймерді/бұғаттан шығару шартын түсіндіріңіз.
12) Метрика
Access Denied Rate: рөлдер/экрандар бойынша істен шығу үлесі (нашар IA немесе саясат туралы сигнал).
Approval SLA: ағындар бойынша бекіту уақытының медианы (шығару, лимиттер, KYC).
Mask Reveal Events: PII «ашылу» жиілігі (күтілетін аз және негізделген).
Error-to-Resolution: 403-тен берілген қатынасқа дейінгі уақыт.
Least-Privilege Drift: артық құқықты рөлдер (пайдалану бойынша жоба).
13) Қарсы үлгілер
Қателерді «ештеңе болған жоқ» деп жасыру.
Бос батырмаларды түсіндірмей көрсету.
Иесінің жеке деректерін жасыру.
Серверлік саясаттарсыз UI-гвардаларға сүйену.
Фичефлагтарды қатынаспен араластыру (әр түрлі тапсырмалар).
Қолайлылық үшін «god-mode» саппортын беру.
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 бар түсінікті беттер/карточкалар бар.
Әрекеттер мен гвардалар
- Рұқсатсыз түймешіктер - 'disabled' + tooltip/мәтін.
- Роуттар қорғалған; түсіндірумен тікелей URL → 403.
- Сервер әрбір әрекетті растайды.
Деректер
- PII/PAN/KYC саясат бойынша бүркемеленеді.
- «Ашулар» логтары жазылады және тексеріледі.
- Экспорт/есептер рөлге сәйкес келеді (аналитикаға арналған агрегаттар).
SoD/Approvals
- Бастамашы өзінің өтінімін бекіте алмайды.
- Шекті сома → көп сатылы маршруттар.
А11у/Локализация
- «Қатынас жоқ» жергілікті; пернетақталық навигация жұмыс істейді.
- Контраст/фокус сақинасы АА сәйкес келеді.
Сенімділік
- Қысқа TTL рұқсаттар кэші; рөлі ауысқан кездегі мүгедектік.
- PDP → UI құлауы «дефолт қауіпсіз» режимінде жұмыс істейді.
17) Дизайн-жүйедегі құжаттама
Компоненты: `GuardedRoute`, `Can`, `NoAccessCard`, `ApprovalBanner`, `Redact`.
Саясат: рөлдер/әрекеттер матрицасы, SoD-ережелер, бүркемелеу деңгейлері.
Процесс: рұқсат сұрауы, рөлдерді оқыту/сертификаттау, N аптада бір рет құқықтарды тексеру.
Do/Don 't-галереясы: «себепсіз бос түймелер», «иесіне бүркемелеу», «серверлік тексерусіз UI» vs «түсіндірілген шектеулер және CTA».
Қысқаша түйіндеме
Рөлдік интерфейстер - бұл түсінікті ақпараттық сәулет + қатаң саясат + достық түсініктер. Тек қажеттіні көрсетіңіз, сезімтал деректерді жасырыңыз, бағыттар мен әрекеттерді гвардиялармен қорғаңыз, аудиттегі әрбір сыни оқиғаны белгілеңіз және ол ақша мен комплаенске әсер ететін жерде міндеттерді бөлісіңіз. iGaming-те бұл тәуекелдерді азайтып қана қоймай, командалардың жұмысын жылдам және тыныш етеді.