feat(auth): 鉴权片2 —— 前端登录闭环 + 保护路由 + 去掉 header 兜底

把 JWT 鉴权从后端核心闭环到端到端：

后端：
- middleware.RequireAuth：上下文无已验证 uid 则 401；挂在 owner 作用域业务路由组。
- 路由拆 公开/受保护：公开=auth/health + 按 task_id 寻址的 SSE 与报告导出
  （EventSource/下载无法带 Bearer）；受保护=tasks/memory/kb*/agents/reports/billing。
- userID(c) 去掉 X-User-ID 兜底，仅信任 JWT 注入的 uid。
- 修 CORS：Allow-Headers 增 Authorization（否则浏览器拦截带 Bearer 的请求）。

前端：
- lib/api：token 存 localStorage + Bearer 头（不再发 X-User-ID）+ authRegister/Login/Me
  + 401 清令牌并广播 sdx:logout；submitTask/report/memory/列表加载走 Bearer 与 401 守卫。
- views/Login：登录/注册全屏门。
- App：启动校验令牌 → 无则渲染 Login，有则进主应用；identity.userId=已验证 user.id；
  监听 sdx:logout 回登录页。
- TopBar：去掉可编辑身份输入，改显登录用户 + 登出。

实跑验证（docker+gateway+preview）：
- RequireAuth：无 token /kb/list、/agents → 401；/health → 200；带 token → 200。
- 前端：无 token 显登录门；注入有效 token 重载 → 进主应用、顶栏显 Dexter、KB 加载本人库、
  隔离徽标显雪花 uid。控制台无错、生产构建通过。
- 过程中发现并修复 CORS 缺 Authorization 头的真实 bug。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

sundynix-desktop/frontend/src/App.tsx

@@ -12,11 +12,22 @@ import { RunsView } from "./views/RunsView";
 import { Home } from "./views/Home";
 import { Placeholder } from "./views/Placeholder";
 import { CommandPalette, type Command } from "./components/CommandPalette";
-import { submitTask, streamTokens, streamExec, type Identity } from "./lib/api";
+import { Login } from "./views/Login";
+import { submitTask, streamTokens, streamExec, authMe, logout, type Identity, type AuthUser } from "./lib/api";
 import type { TaskDsl } from "./lib/dsl";
 import { emptyRun, type RunState } from "./lib/run";
 import { ToastProvider } from "./ui";
 
+// 会话标识：本地持久化生成一次（多轮历史用，与鉴权身份分离）。
+function getSessionId(): string {
+  let s = localStorage.getItem("sdx_sess");
+  if (!s) {
+    s = "sess-" + Math.random().toString(36).slice(2, 10);
+    localStorage.setItem("sdx_sess", s);
+  }
+  return s;
+}
+
 const PLACEHOLDERS: Partial<Record<ViewKey, { title: string; desc: string }>> = {
   home: { title: "工作台", desc: "概览：知识库 / 文档 / 近期运行 / 待办报告 / 配额计费 + 快捷入口。" },
   kb: { title: "知识库 (RAG)", desc: "入库流水线监控 · 检索调试台(带来源徽标) · 文档/块浏览 · 知识图谱 · 检索评测。依赖 embedding + 入库 worker + 真实混合检索。" },
@@ -28,7 +39,9 @@ const PLACEHOLDERS: Partial<Record<ViewKey, { title: string; desc: string }>> =
 
 export default function App() {
   const [view, setView] = useState<ViewKey>("home");
-  const [identity, setIdentity] = useState<Identity>({ userId: "wt", sessionId: "sess-ui" });
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [authLoading, setAuthLoading] = useState(true);
+  const identity = useMemo<Identity>(() => ({ userId: user?.id ?? "", sessionId: getSessionId() }), [user]);
   const [run, setRun] = useState<RunState>(emptyRun);
   const [cmdOpen, setCmdOpen] = useState(false);
   const closeRef = useRef<(() => void) | null>(null);
@@ -47,6 +60,22 @@ export default function App() {
     return () => window.removeEventListener("keydown", onKey);
   }, []);
 
+  // 启动校验现有令牌；并监听 401 登出事件（令牌失效 → 回登录页）。
+  useEffect(() => {
+    authMe()
+      .then(setUser)
+      .catch(() => setUser(null))
+      .finally(() => setAuthLoading(false));
+    const onLogout = () => setUser(null);
+    window.addEventListener("sdx:logout", onLogout);
+    return () => window.removeEventListener("sdx:logout", onLogout);
+  }, []);
+
+  const onLogout = useCallback(() => {
+    logout();
+    setUser(null);
+  }, []);
+
   const commands = useMemo<Command[]>(() => {
     const go = (key: ViewKey) => () => setView(key);
     return [
@@ -109,6 +138,18 @@ export default function App() {
     [identity],
   );
 
+  // 鉴权门：校验中显示占位；未登录显示登录页；登录后进入主应用。
+  if (authLoading) {
+    return <div className="flex h-screen w-screen items-center justify-center bg-ink-950 text-sm text-slate-500">加载中…</div>;
+  }
+  if (!user) {
+    return (
+      <ToastProvider>
+        <Login onAuthed={setUser} />
+      </ToastProvider>
+    );
+  }
+
   return (
     <ToastProvider>
     <div className="relative flex h-screen w-screen flex-col bg-ink-950 text-slate-200">
@@ -117,7 +158,7 @@ export default function App() {
         className="pointer-events-none absolute inset-x-0 top-0 h-64 opacity-60"
         style={{ background: "radial-gradient(60% 100% at 50% 0%, rgba(124,92,246,0.10), transparent 70%)" }}
       />
-      <TopBar identity={identity} setIdentity={setIdentity} onCommand={() => setCmdOpen(true)} />
+      <TopBar user={user} onLogout={onLogout} onCommand={() => setCmdOpen(true)} />
       <div className="relative flex min-h-0 flex-1">
         <LeftNav active={view} onSelect={setView} />
         <main className="min-w-0 flex-1 overflow-hidden">

sundynix-desktop/frontend/src/lib/api.ts

@@ -10,17 +10,100 @@ export interface Identity {
   sessionId: string;
 }
 
+export interface AuthUser {
+  id: string;
+  email: string;
+  name?: string;
+}
+
+// ---- JWT 令牌存储（localStorage）----
+const TOKEN_KEY = "sdx_token";
+let authToken: string = typeof localStorage !== "undefined" ? localStorage.getItem(TOKEN_KEY) ?? "" : "";
+
+export function setToken(t: string): void {
+  authToken = t;
+  try {
+    localStorage.setItem(TOKEN_KEY, t);
+  } catch {
+    /* 隐私模式忽略 */
+  }
+}
+export function clearToken(): void {
+  authToken = "";
+  try {
+    localStorage.removeItem(TOKEN_KEY);
+  } catch {
+    /* ignore */
+  }
+}
+export function getToken(): string {
+  return authToken;
+}
+
+// bearer 把 JWT 放进请求头（无令牌则不带）。
+function bearer(): Record<string, string> {
+  return authToken ? { Authorization: `Bearer ${authToken}` } : {};
+}
+
+// guard401 在收到 401 时清理令牌并广播登出事件（App 监听后回到登录页）。
+function guard401(res: Response): Response {
+  if (res.status === 401) {
+    clearToken();
+    if (typeof window !== "undefined") window.dispatchEvent(new Event("sdx:logout"));
+  }
+  return res;
+}
+
+// ---- 鉴权 API ----
+export async function authRegister(email: string, password: string, name: string): Promise<AuthUser> {
+  const res = await fetch(`${GATEWAY}/api/v1/auth/register`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, password, name }),
+  });
+  const data = (await res.json()) as { token?: string; user?: AuthUser; error?: string };
+  if (!res.ok || !data.token || !data.user) throw new Error(data.error ?? `注册失败: ${res.status}`);
+  setToken(data.token);
+  return data.user;
+}
+
+export async function authLogin(email: string, password: string): Promise<AuthUser> {
+  const res = await fetch(`${GATEWAY}/api/v1/auth/login`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, password }),
+  });
+  const data = (await res.json()) as { token?: string; user?: AuthUser; error?: string };
+  if (!res.ok || !data.token || !data.user) throw new Error(data.error ?? `登录失败: ${res.status}`);
+  setToken(data.token);
+  return data.user;
+}
+
+// authMe 用当前令牌取登录用户；无效/过期返回 null（用于应用启动校验）。
+export async function authMe(): Promise<AuthUser | null> {
+  if (!authToken) return null;
+  const res = await fetch(`${GATEWAY}/api/v1/auth/me`, { headers: bearer() });
+  if (!res.ok) {
+    clearToken();
+    return null;
+  }
+  const data = (await res.json()) as { user?: AuthUser };
+  return data.user ?? null;
+}
+
+export function logout(): void {
+  clearToken();
+}
+
 // submitTask: POST /api/v1/tasks，返回 task_id。
 export async function submitTask(dsl: TaskDsl, id: Identity): Promise<string> {
-  const res = await fetch(`${GATEWAY}/api/v1/tasks`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-User-ID": id.userId,
-      "X-Session-ID": id.sessionId,
-    },
-    body: JSON.stringify(dsl),
-  });
+  const res = guard401(
+    await fetch(`${GATEWAY}/api/v1/tasks`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...idHeaders(id) },
+      body: JSON.stringify(dsl),
+    }),
+  );
   if (!res.ok) throw new Error(`submit failed: ${res.status} ${await res.text()}`);
   const data = (await res.json()) as { task_id: string };
   return data.task_id;
@@ -91,9 +174,10 @@ export interface IngestEvent {
   error?: string;
 }
 
-// idHeaders 把身份带进请求头 —— 网关据此把知识库锁进 owner 作用域（隔离）。
+// idHeaders 把身份带进请求头：JWT(Bearer) 作鉴权与 owner 作用域；X-Session-ID 作多轮会话标识。
+// 不再发 X-User-ID —— owner 由网关从已验证 JWT 取（伪造头无效）。
 function idHeaders(id: Identity): Record<string, string> {
-  return { "X-User-ID": id.userId, "X-Session-ID": id.sessionId };
+  return { ...bearer(), "X-Session-ID": id.sessionId };
 }
 
 export interface KbInfo {
@@ -103,7 +187,7 @@ export interface KbInfo {
 
 // listKb: GET /api/v1/kb/list —— 当前用户的知识库列表（owner 隔离）。
 export async function listKb(id: Identity): Promise<KbInfo[]> {
-  const res = await fetch(`${GATEWAY}/api/v1/kb/list`, { headers: idHeaders(id) });
+  const res = guard401(await fetch(`${GATEWAY}/api/v1/kb/list`, { headers: idHeaders(id) }));
   const data = (await res.json()) as { kbs?: KbInfo[]; error?: string };
   if (!res.ok) throw new Error(data.error ?? `list failed: ${res.status}`);
   return data.kbs ?? [];
@@ -141,7 +225,7 @@ export interface AgentInfo {
 }
 
 export async function listAgents(id: Identity): Promise<AgentInfo[]> {
-  const res = await fetch(`${GATEWAY}/api/v1/agents`, { headers: idHeaders(id) });
+  const res = guard401(await fetch(`${GATEWAY}/api/v1/agents`, { headers: idHeaders(id) }));
   const data = (await res.json()) as { agents?: AgentInfo[]; error?: string };
   if (!res.ok) throw new Error(data.error ?? `list agents failed: ${res.status}`);
   return data.agents ?? [];
@@ -288,15 +372,13 @@ export async function searchKb(id: Identity, kb: string, q: string, topK = 5): P
 // generateReport: POST /api/v1/reports —— 触发报告生成，返回 task_id。
 // 用 streamTokens(task_id) 看实时进度，完成后用 reportDownloadUrl(task_id) 下载 Word。
 export async function generateReport(id: Identity, topic: string, kb?: string): Promise<string> {
-  const res = await fetch(`${GATEWAY}/api/v1/reports`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-User-ID": id.userId,
-      "X-Session-ID": id.sessionId,
-    },
-    body: JSON.stringify({ topic, kb: kb ?? "" }),
-  });
+  const res = guard401(
+    await fetch(`${GATEWAY}/api/v1/reports`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...idHeaders(id) },
+      body: JSON.stringify({ topic, kb: kb ?? "" }),
+    }),
+  );
   const data = (await res.json()) as { task_id?: string; error?: string };
   if (!res.ok || !data.task_id) throw new Error(data.error ?? `report failed: ${res.status}`);
   return data.task_id;
@@ -318,15 +400,13 @@ export async function setMemory(
   key: string,
   value: string,
 ): Promise<string> {
-  const res = await fetch(`${GATEWAY}/api/v1/memory`, {
-    method: "PUT",
-    headers: {
-      "Content-Type": "application/json",
-      "X-User-ID": id.userId,
-      "X-Session-ID": id.sessionId,
-    },
-    body: JSON.stringify({ key, value }),
-  });
+  const res = guard401(
+    await fetch(`${GATEWAY}/api/v1/memory`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json", ...idHeaders(id) },
+      body: JSON.stringify({ key, value }),
+    }),
+  );
   const data = (await res.json()) as { message?: string; error?: string };
   if (!res.ok) throw new Error(data.error ?? `memory failed: ${res.status}`);
   return data.message ?? "ok";

sundynix-desktop/frontend/src/shell/TopBar.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "react";
-import { User, ChevronDown, Search as SearchIcon } from "lucide-react";
-import type { Identity } from "../lib/api";
+import { User, ChevronDown, Search as SearchIcon, LogOut } from "lucide-react";
+import type { AuthUser } from "../lib/api";
 import { useHealth } from "../lib/health";
 import { isMacDesktop } from "../lib/desktop";
 import { cn } from "../ui";
@@ -19,8 +19,8 @@ function Light({ on, label }: { on: boolean; label: string }) {
   );
 }
 
-// 顶栏：品牌 · 垂直切换 · 健康灯 · 身份/会话（深色 + 毛玻璃）。
-export function TopBar({ identity, setIdentity, onCommand }: { identity: Identity; setIdentity: (id: Identity) => void; onCommand?: () => void }) {
+// 顶栏：品牌 · 垂直切换 · 健康灯 · 登录用户 + 登出（深色 + 毛玻璃）。
+export function TopBar({ user, onLogout, onCommand }: { user: AuthUser; onLogout: () => void; onCommand?: () => void }) {
   const h = useHealth();
   return (
     <header
@@ -62,21 +62,17 @@ export function TopBar({ identity, setIdentity, onCommand }: { identity: Identit
         <Light on={h.neo4j} label="Neo4j" />
       </div>
       <div className="ml-auto flex items-center gap-2" style={NODRAG}>
-        <div className="relative">
-          <User className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
-          <input
-            className="w-24 rounded-md border border-line bg-ink-800 py-1 pl-7 pr-2 text-xs text-slate-200 focus:border-brand focus:outline-none"
-            value={identity.userId}
-            onChange={(e) => setIdentity({ ...identity, userId: e.target.value })}
-            title="用户"
-          />
-        </div>
-        <input
-          className="w-24 rounded-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-200 focus:border-brand focus:outline-none"
-          value={identity.sessionId}
-          onChange={(e) => setIdentity({ ...identity, sessionId: e.target.value })}
-          title="会话"
-        />
+        <span className="flex items-center gap-1.5 rounded-md border border-line bg-ink-800 px-2.5 py-1 text-xs text-slate-300" title={user.email}>
+          <User className="h-3.5 w-3.5 text-slate-500" />
+          {user.name || user.email}
+        </span>
+        <button
+          onClick={onLogout}
+          className="flex items-center gap-1 rounded-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-400 transition hover:border-danger/50 hover:text-danger"
+          title="退出登录"
+        >
+          <LogOut className="h-3.5 w-3.5" />
+        </button>
       </div>
     </header>
   );

sundynix-desktop/frontend/src/views/Login.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { LogIn, UserPlus, Loader2 } from "lucide-react";
+import { authLogin, authRegister, type AuthUser } from "../lib/api";
+import { Button, Input, Field } from "../ui";
+
+// Login：未登录时的全屏鉴权门。登录/注册成功后回调 onAuthed 把用户交给 App。
+export function Login({ onAuthed }: { onAuthed: (u: AuthUser) => void }) {
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState("");
+
+  const submit = async () => {
+    if (busy) return;
+    setErr("");
+    setBusy(true);
+    try {
+      const u = mode === "login" ? await authLogin(email.trim(), password) : await authRegister(email.trim(), password, name.trim());
+      onAuthed(u);
+    } catch (e) {
+      setErr((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const isRegister = mode === "register";
+  return (
+    <div className="flex h-screen w-screen items-center justify-center bg-ink-950 text-slate-200">
+      <div
+        className="pointer-events-none absolute inset-x-0 top-0 h-80 opacity-60"
+        style={{ background: "radial-gradient(60% 100% at 50% 0%, rgba(124,92,246,0.12), transparent 70%)" }}
+      />
+      <div className="relative w-[360px] rounded-xl border border-line bg-ink-900 p-6 shadow-card">
+        <div className="mb-1 flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand/20 text-brand-400 font-bold">S</div>
+          <span className="text-lg font-semibold text-slate-100">sundynix-agentix</span>
+        </div>
+        <p className="mb-5 text-xs text-slate-500">{isRegister ? "创建账户以开始" : "登录以继续"}</p>
+
+        <div className="space-y-3">
+          {isRegister && (
+            <Field label="昵称">
+              <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="如 Dexter" autoFocus={isRegister} />
+            </Field>
+          )}
+          <Field label="邮箱">
+            <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" autoFocus={!isRegister} onKeyDown={(e) => e.key === "Enter" && submit()} />
+          </Field>
+          <Field label="密码">
+            <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={isRegister ? "至少 6 位" : "••••••••"} onKeyDown={(e) => e.key === "Enter" && submit()} />
+          </Field>
+        </div>
+
+        {err && <div className="mt-3 rounded-md bg-danger/10 px-3 py-2 text-xs text-danger">{err}</div>}
+
+        <Button variant="primary" className="mt-4 w-full justify-center" icon={busy ? Loader2 : isRegister ? UserPlus : LogIn} disabled={busy || !email.trim() || !password} onClick={submit}>
+          {busy ? "处理中…" : isRegister ? "注册并进入" : "登录"}
+        </Button>
+
+        <div className="mt-3 text-center text-[11px] text-slate-500">
+          {isRegister ? "已有账户？" : "还没有账户？"}
+          <button className="ml-1 text-brand-400 hover:underline" onClick={() => { setErr(""); setMode(isRegister ? "login" : "register"); }}>
+            {isRegister ? "去登录" : "去注册"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}