인가는 누가 어떤 리소스에 어떤 작업을 할 수 있는지 확인합니다. 로그인 여부만 보지 않고 요청 대상과 작업, 소유 관계를 서버에서 검사합니다.
데모는 같은 로그인 사용자라도 자신의 문서는 열고 다른 사용자의 문서는 차단합니다. UI에서 버튼을 숨기는 것만으로는 충분하지 않으며 서버의 모든 경로에서 검사가 필요합니다.
언제 쓰나
API, 파일, 문서, 관리 기능처럼 사용자별 접근 범위가 다른 곳에 적용합니다.
인가
Authorization
인증된 사용자가 특정 리소스에 특정 작업을 해도 되는지 판단합니다.
···
<div class="sd"><div class="sd-head"><strong>AUTHORIZATION</strong><span id="state">live check</span></div><div class="sd-stage"><div class="tile user">member A</div><div class="doors"><div class="tile" id="own">own document</div><div class="tile" id="other">other document</div></div><div class="verdict" id="verdict">checking</div></div><div class="sd-foot"><span id="caption">checking boundary</span><span>tap to step</span></div></div>.sd{box-sizing:border-box;width:min(94vw,700px);height:min(86vh,318px);padding:clamp(9px,2.3vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);display:flex;flex-direction:column;gap:clamp(6px,1.8vmin,12px);font:600 clamp(12px,2.6vmin,16px)/1.25 var(--font-sans, sans-serif)}.sd *{box-sizing:border-box}.sd-head,.sd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:1.25em}.sd-head strong{color:var(--accent);letter-spacing:.06em}.sd-head span,.sd-foot{color:var(--muted)}.sd-foot{font-size:clamp(12px,2.4vmin,14px)}.sd-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vmin,18px);overflow:hidden}.sd .mono{font-family:ui-monospace,monospace}.sd .tile{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.5vmin,10px);text-align:center}.sd .good{color:var(--accent);border-color:var(--accent)}.sd .bad{color:var(--accent-3);border-color:var(--accent-3)}.sd .arrow{color:var(--muted);font-size:clamp(15px,4vmin,28px)}.sd .active{background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-color:var(--accent)}.sd .blocked{background:color-mix(in srgb,var(--accent-3) 13%,var(--surface));border-color:var(--accent-3)}.sd-stage .user{min-width:26%}.doors{display:grid;gap:clamp(5px,1.5vmin,10px);width:38%}.verdict{min-width:20%;text-align:center;color:var(--accent);font-weight:800}.doors .tile{transition:background .2s}let n=0;function advance(){n=(n+1)%2;document.getElementById('own').classList.toggle('active',n===1);document.getElementById('other').classList.toggle('blocked',n===0);document.getElementById('verdict').textContent=n?'ALLOW':'DENY';document.getElementById('verdict').style.color=n?'var(--accent)':'var(--accent-3)';document.getElementById('state').textContent=n?'owner matched':'owner mismatch';document.getElementById('caption').textContent=n?'member A opens own file':'member A requests another file'}advance();setInterval(advance,900);
document.querySelector('.sd').addEventListener('pointerdown',advance);