NestJS guards — CanActivate & Reflector playground

<div class="pg">
    <h1 class="pg-title">🎮 Walk a request through a NestJS guard chain</h1>
    <p class="pg-sub">
      This is a <b>model</b> of how <code>CanActivate</code>, <code>ExecutionContext</code>, and
      <code>Reflector</code> decide who reaches a handler — not a running NestJS server. Set the
      conditions below, send a simulated request, and watch exactly which guard stops it (if any).
    </p>

<div class="banner info">
      Simulated model — walks Nest's documented guard order and <code>Reflector.getAllAndOverride()</code>
      semantics in plain JS. No real server, no real request.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px;">
        <div class="field">
          <span class="ctl-label">Global AuthGuard sees a token?</span>
          <div class="seg" id="authSeg">
            <button type="button" aria-pressed="true" data-val="yes">Authenticated</button>
            <button type="button" aria-pressed="false" data-val="no">No token (401)</button>
          </div>
        </div>
        <div class="field">
          <span class="ctl-label">Requesting user's role</span>
          <div class="seg" id="userSeg">
            <button type="button" aria-pressed="false" data-val="guest">guest</button>
            <button type="button" aria-pressed="true" data-val="editor">editor</button>
            <button type="button" aria-pressed="false" data-val="admin">admin</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px; margin-top:12px;">
        <div class="field">
          <span class="ctl-label">Route's <code>@Roles()</code> metadata</span>
          <div class="seg" id="metaSeg">
            <button type="button" aria-pressed="true" data-val="class-editor">Class: @Roles("editor") only</button>
            <button type="button" aria-pressed="false" data-val="method-admin">Method overrides: @Roles("admin")</button>
            <button type="button" aria-pressed="false" data-val="method-none">Method overrides: no @Roles() (public)</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶️ Send simulated request</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="happy">Preset: authenticated admin, method needs admin</button>
        <button class="btn sm" data-preset="noauth">Preset: no token at all</button>
        <button class="btn sm" data-preset="wrongrole">Preset: authenticated editor, method needs admin</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Guard chain</div>
      <div class="pipeline" id="pipeline">
        <div class="stage" data-stage="auth"><span class="ico">🔑</span>Global AuthGuard<span class="sub">APP_GUARD</span></div>
        <div class="stage" data-stage="roles"><span class="ico">🛂</span>RolesGuard<span class="sub">Reflector.getAllAndOverride()</span></div>
        <div class="stage" data-stage="handler"><span class="ico">⚙️</span>Route handler<span class="sub">reached only if both pass</span></div>
      </div>
      <div class="arrowrow">left → right, global guard first · a skipped stage means the request never reached it</div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick conditions above and send a request.</span>
      </div>
      <p class="hint" id="caption">Every request hits the global guard first, before any controller- or method-level guard.</p>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.