fix(gateway): 补齐鉴权测试页并保持旧接口兼容

2026-11-07 21:11:17 +08:00
parent 51baf96d78
commit c7add84d91
11 changed files with 100 additions and 22 deletions
@@ -1,7 +1,9 @@
 (() => {
  const form = document.getElementById("client-auth");
  const message = document.getElementById("client-auth-status");
-  const button = form.querySelector("button");
+  const loginButton = form.querySelector('button[type="submit"]');
+  const checkButton = document.getElementById("client-auth-check");
+  const refreshButton = document.getElementById("client-auth-refresh");
  let accessToken;
  let refreshToken;
  let accessExpiry = 0;
@@ -19,23 +21,30 @@
    return result.data;
  }

-  form.addEventListener("submit", async (event) => {
-    event.preventDefault();
-    button.disabled = true;
-    const data = new FormData(form);
+  async function runAction(action) {
+    loginButton.disabled = checkButton.disabled = refreshButton.disabled = true;
    try {
+      await action();
+    } catch (error) {
+      message.textContent = error.message;
+    } finally {
+      loginButton.disabled = checkButton.disabled = false;
+      refreshButton.disabled = !refreshToken;
+    }
+  }
+
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const data = new FormData(form);
+    form.elements.namedItem("password").value = "";
+    runAction(async () => {
      const result = await requestToken("login", {
        username: data.get("username"),
        password: data.get("password"),
      });
      refreshToken = result.refresh_token;
      message.textContent = "已登录。访问令牌过期时会自动刷新。";
-    } catch (error) {
-      message.textContent = error.message;
-    } finally {
-      form.elements.namedItem("password").value = "";
-      button.disabled = false;
-    }
+    });
  });

  async function refresh() {
@@ -44,11 +53,31 @@
      await requestToken("refresh", { refresh_token: refreshToken });
    } catch (error) {
      accessToken = refreshToken = undefined;
+      refreshButton.disabled = true;
      message.textContent = "请重新登录。";
      throw error;
    }
  }

+  checkButton.addEventListener("click", () => runAction(async () => {
+    const path = "/api/v1/auth/check";
+    const anonymous = await fetch(path);
+    if (anonymous.status !== 401) throw new Error("无令牌检查返回 HTTP " + anonymous.status);
+    if (!accessToken) {
+      message.textContent = "无令牌已拒绝（HTTP 401）。登录后可验证访问令牌。";
+      return;
+    }
+    const response = await fetch(path, { headers: { Authorization: "Bearer " + accessToken } });
+    const result = await response.json();
+    if (!response.ok || result.code !== 0) throw new Error(result.message || "访问令牌检查失败");
+    message.textContent = "鉴权通过：无令牌返回 HTTP 401，有效令牌返回 HTTP 200。";
+  }));
+
+  refreshButton.addEventListener("click", () => runAction(async () => {
+    await refresh();
+    message.textContent = "访问令牌已刷新，有效期 15 分钟。";
+  }));
+
  window.hairClientFetch = async (path, options) => {
    if (Date.now() >= accessExpiry || !accessToken) await refresh();
    const send = () => {
@@ -63,10 +63,12 @@
  <h1>🔬 接口42 — 用户特征分析与两项判定 测试</h1>
  <p class="subtitle">POST /api/v1/face/features-42 &nbsp;|&nbsp; 质检 → 扶正裁切 → 面部特征与两项判定 &nbsp;|&nbsp; data.features 为 JSON 字符串</p>

-  <form id="client-auth" style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0">
+  <form id="client-auth" method="post" action="/api/v1/auth/login" style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0">
    <label>用户名 <input name="username" autocomplete="username" required></label>
    <label>密码 <input name="password" type="password" autocomplete="current-password" required></label>
    <button type="submit">登录</button>
+    <button id="client-auth-check" type="button">测试鉴权</button>
+    <button id="client-auth-refresh" type="button" disabled>刷新令牌</button>
    <span id="client-auth-status" role="status">登录后可调用接口。</span>
  </form>
  <script src="/static/client_auth.js" defer></script>
@@ -103,10 +103,12 @@
  <p class="subtitle">上传正面照，选择性别与发型，查看按中下庭均值定位的设计曲线和生发效果。</p>
  <div class="rule-banner"><strong>目标上庭高度 =（中庭高度 + 下庭高度）÷ 2</strong><br>上传图先扶正9→152，再裁切为高约 3.3333×L、宽 2.5×L，人物比原3L规则缩小约10%；L 是9号点到152号点的像素距离，眉心位置沿用参考图比例。长图会在保留人脸的前提下裁为3:4，其余空间不足时仅扶正。从眉心向上定位，各发型中点对齐同一目标。high、low 已停用，旧字段返回 null。</div>

-  <form id="client-auth" style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0">
+  <form id="client-auth" method="post" action="/api/v1/auth/login" style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0">
    <label>用户名 <input name="username" autocomplete="username" required></label>
    <label>密码 <input name="password" type="password" autocomplete="current-password" required></label>
    <button type="submit">登录</button>
+    <button id="client-auth-check" type="button">测试鉴权</button>
+    <button id="client-auth-refresh" type="button" disabled>刷新令牌</button>
    <span id="client-auth-status" role="status">登录后可调用接口。</span>
  </form>
  <script src="/static/client_auth.js" defer></script>
@@ -32,10 +32,12 @@
 <main>
  <h1>72 号接口 · B 端五个关键点</h1>
  <p class="note">上传正面照，查看扶正裁切后的六个白点、四条虚线和厘米标注。</p>
-  <form id="client-auth" style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0">
+  <form id="client-auth" method="post" action="/api/v1/auth/login" style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0">
    <label>用户名 <input name="username" autocomplete="username" required></label>
    <label>密码 <input name="password" type="password" autocomplete="current-password" required></label>
    <button type="submit">登录</button>
+    <button id="client-auth-check" type="button">测试鉴权</button>
+    <button id="client-auth-refresh" type="button" disabled>刷新令牌</button>
    <span id="client-auth-status" role="status">登录后可调用接口。</span>
  </form>
  <script src="/static/client_auth.js" defer></script>