Ролдор жана жеткиликтүүлүктөр боюнча интерфейстер
1) Принциптер
1. Коопсуздук = UX милдети. Колдонуучу "боз зоналары" жок эмне кыла аларын жана кыла албасын так түшүнүшү керек.
2. Минималдуу зарыл укуктар. Көрсөтүүдөн аракеттерге чейин - баары ролдун милдеттери менен чектелет.
3. тыюу ордуна сигнал. Эгерде кирүү мүмкүнчүлүгү жок болсо, анда эмне үчүн жана кантип алуу керектигин түшүндүрөбүз (суроо-талап, арыз, окуу).
4. Серверде кайталоо. UI-guards эч качан Server текшерүүлөрдү алмаштыруу.
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 Masking жана түзөтүү
PII (email, тел, дарек) - 'user @.', '+ 380 90' башка адамдардын жазуулар үчүн.
PAN/IBAN - гана токендер/акыркы 4.
"Толугу менен көрсөтүү" баскычы - аудитордук/иш-чара үчүн гана.
5) UI уруксат Архитектура
Кардар боюнча саясат контексти: уруксат кэш (TTL кыска) + жаңыртуу жазылуу.
Guard маршруттар: жеткиликтүү Роут → 403-бет түшүндүрмө жана CTA менен.
компоненттеринин Guards: 'Can ({action:' approve _ withdrawal ', resource:' payout '})'.
Ficheflages: эксперименталдык/сезондук нерселер - укуктардан өзүнчө.
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) Server> Кардар
Ар кандай иш-аракет маркалары (ролу, атрибуттары) менен токен боюнча Server тарабынан тастыкталат.
Саясат борборлоштурулган (PDP/OPA/Cedar/Zanzibar сыяктуу), UI гана чечим кабыл алат.
Бардык маанилүү операциялар - эки факторлуу ырастоо + аудит.
7) Камуфляж жана кызыл маалымат зоналары
Маалымат категориялары:- PII: аты-жөнү, электрондук почта, тел, дареги, туулган күнү.
- Финансы: 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
"Кирүү жок" тексттери локализацияланат жана иштеп жаткан жолдорду камтыйт (арыз/окуу).
Focus Management: колдонуучуну түшүндүрмөсүз "бош" баракка көчүрбөө.
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) Анти-үлгүлөрү
Каталарды "эч нерсе болгон жок" деп жашыруу.
Эч кандай түшүндүрмөсү жок бош баскычтарды көрсөтүү.
Ээсине өзүнүн маалыматтарын жашыруу.
Server саясаты жок 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/>;
}
CTA менен "мүмкүндүк жок" карта:
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/текст.
- Routes корголгон; түшүндүрмө менен түз URL → 403.
- Сервер ар бир иш-аракеттерди тастыктайт.
Маалыматтар
- PII/PAN/KYC саясатка жамынып.
- "Ачылыштар" Логи жазылган жана Revolution.
- Экспорт/отчеттор ролу менен дал келет (аналитика үчүн агрегаттар).
SoD/Approvals
- Демилгечи өзүнүн арызын беките албайт.
- Босого суммасы → көп баскычтуу каттамдар.
A11u/Локализация
- "Жок" локализацияланган; клавиатура багыттоо иштейт.
- Контраст/фокус шакек AA ылайык келет.
Ишенимдүүлүк
- Кыска TTL менен уруксат кэш; ролу өзгөргөндө майыптык.
- PDP → UI күзүндө "демейки коопсуз" режиминде иштейт.
17) Дизайн системасында документтер
Компоненты: `GuardedRoute`, `Can`, `NoAccessCard`, `ApprovalBanner`, `Redact`.
Саясат: ролдордун/иш-аракеттердин матрицасы, SoD эрежелери, камуфляж деңгээлдери.
Процесс: кирүү өтүнүчү, ролдорду окутуу/тастыктоо, N жума сайын укуктарды текшерүү.
Do/Don 't-галерея: "эч кандай себепсиз бош баскычтар", "ээсине жашыруу", "сервер текшерүүлөр жок UI" vs "түшүндүрүлгөн чектөөлөр жана CTA".
Кыскача резюме
Ролдук интерфейстер - бул түшүнүктүү маалыматтык архитектура + катуу саясат + достук түшүндүрмөлөр. Керектүү нерселерди гана көрсөтүңүз, сезимтал маалыматтарды жаап-жашырыңыз, маршруттарды жана иш-аракеттерди коргоңуз, аудиттеги ар бир маанилүү окуяны жазыңыз жана акчага жана комплаенске таасир эткен жерде милдеттерди бөлүшүңүз. iGaming бул гана тобокелдиктерди азайтуу эмес, ошондой эле тез жана тынч командалардын ишин кылат.