From 5bb2940969f764e80689780d780a814c29497fdb Mon Sep 17 00:00:00 2001 From: yuetsh <517252939@qq.com> Date: Thu, 22 Oct 2026 18:20:41 +0800 Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=94=B9=E7=94=A8=E8=AE=BF?= =?UTF-8?q?=E9=97=AE=E4=BB=A4=E7=89=8C=20+=20=E5=88=B7=E6=96=B0=E4=BB=A4?= =?UTF-8?q?=E7=89=8C=EF=BC=8C=E4=B8=8D=E7=94=A8=20cookie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 访问令牌：JWT（HS256），15 分钟，Authorization: Bearer；WebSocket 放在网址参数里 - 刷新令牌：30 天，每次刷新换新的，数据库只存哈希；退出登录即作废 - 重置密码、删除学生：令牌版本加一并删除刷新令牌，所有设备立即退出 - 签名密钥首次使用时生成，存在数据库 settings 表 - 浏览器：令牌存 localStorage；快过期先刷新，401 时刷新一次再重试；多个标签页同时刷新不冲突 Co-Authored-By: Claude Opus 5.5 --- docs/设计方案.md | 4 +- server/src/app.ts | 34 ++++++----- server/src/auth.ts | 129 ++++++++++++++++++++++++++-------------- server/src/classes.ts | 8 +-- server/src/db.ts | 18 +++++- server/src/index.ts | 10 ++-- server/test/api.test.ts | 61 +++++++++++++++---- web/src/api.ts | 36 +++++++---- web/src/auth.ts | 14 +++-- web/src/run/session.ts | 33 +++++----- web/src/tokens.ts | 95 +++++++++++++++++++++++++++++ 11 files changed, 332 insertions(+), 110 deletions(-) create mode 100644 web/src/tokens.ts diff --git a/docs/设计方案.md b/docs/设计方案.md index a55dbcb..68af370 100644 --- a/docs/设计方案.md +++ b/docs/设计方案.md @@ -189,7 +189,7 @@ IOT/ 1. **沙箱隔离**：每次运行用 bubblewrap 放进独立的命名空间：断网，只能看到系统只读文件、运行时程序和自己的工程目录（只读），/tmp 是独立内存盘，看不到其他进程，不继承服务器的环境变量。另外限制托管堆 128 MB、累计 CPU 时间 120 秒（防死循环占满 CPU）、运行时长 60 分钟，降低优先级（nice 10），全站同时运行上限 150 个。整个平台再放在 Docker 容器里：文件系统只读、去掉全部 capabilities、限制内存和进程数。服务器启动时自检沙箱，不可用时拒绝运行学生代码。 - 没有选"每次运行一个 Docker 容器"：每次多 0.3–0.5 秒，而且应用要能操作 Docker 守护进程，这本身权限过大。代价是应用容器要放开 seccomp / AppArmor，才能让 bubblewrap 创建命名空间。 2. **编译检查**：网络（System.Net）、反射（System.Reflection，AssemblyInfo.cs 里的特性除外）、启动其他程序（Process）、调用本机代码（DllImport、Marshal）、加载程序集、进程间通信、dynamic，编译时直接给出中文报错（SIM001）。文件读写由沙箱限制，不在编译时禁止（项目 7、8 要读图片）。 -3. **账号管控**：不开放注册，老师上传名单批量创建学生账号；所有接口和运行程序的 WebSocket 都要先登录；按 IP 限制输错次数。会话令牌数据库里只存哈希。学生密码由老师发放、老师可查看，按原样保存（有意的取舍）。 +3. **账号管控**：不开放注册，老师上传名单批量创建学生账号；所有接口和运行程序的 WebSocket 都要先登录；按 IP 限制输错次数。登录用访问令牌（JWT，15 分钟，放在 Authorization 请求头里；WebSocket 放在网址参数里）+ 刷新令牌（30 天，每次刷新换新的，数据库只存哈希，退出登录即作废）；重置密码、删除学生时用户的令牌版本加一，所有设备立即退出。学生密码由老师发放、老师可查看，按原样保存（有意的取舍）。 **资源估算** @@ -270,7 +270,7 @@ flowchart TB **第 2 阶段进展**： -- 2026-10-22：账号与班级：老师账号由配置设定；老师建班、上传 CSV 名单导入学生（兼容 Excel 导出的 GBK 和 UTF-8，识别表头，发现被 Excel 变成科学计数法的学号），查看、重置密码，导出带密码的名单（Excel 打开不乱码）；登录页取代原来的统一访问口令。学生的作品自动保存在服务器上（按账号和实验），换电脑登录可以接着做；页面上显示保存状态。 +- 2026-10-22：账号与班级：老师账号由配置设定；老师建班、上传 CSV 名单导入学生（兼容 Excel 导出的 GBK 和 UTF-8，识别表头，发现被 Excel 变成科学计数法的学号），查看、重置密码，导出带密码的名单（Excel 打开不乱码）；登录页取代原来的统一访问口令；登录用访问令牌（JWT）+ 刷新令牌，不用 cookie。学生的作品自动保存在服务器上（按账号和实验），换电脑登录可以接着做；页面上显示保存状态。 ## 技术风险与待确认事项 diff --git a/server/src/app.ts b/server/src/app.ts index f1cc2ab..f198080 100644 --- a/server/src/app.ts +++ b/server/src/app.ts @@ -1,8 +1,7 @@ // HTTP 接口。除登录外都要先登录；/api/teacher/* 只有老师能用。 import type { Database } from 'bun:sqlite' import { Hono, type Context } from 'hono' -import { deleteCookie, setCookie } from 'hono/cookie' -import { login, logout, sessionMaxAge, SESSION_COOKIE, sessionToken, sessionUser, tooManyFailures, type User } from './auth' +import { bearerToken, login, logout, refresh, tokenUser, tooManyFailures, type Tokens, type User } from './auth' import { createClass, deleteClass, deleteStudent, importStudents, listClasses, listStudents, renameClass, resetPassword, type ImportRow } from './classes' import { listSamples, loadSample } from './samples' import { serveStatic } from './static' @@ -20,8 +19,6 @@ function clientIp(c: AppContext) { return c.req.header('x-real-ip') || c.env?.requestIP?.(c.req.raw)?.address || '' } -const isHttps = (c: AppContext) => new URL(c.req.url).protocol === 'https:' || c.req.header('x-forwarded-proto') === 'https' - /** 读取 JSON 请求体，格式不对时返回空对象 */ const body = (c: AppContext) => c.req.json>().catch(() => ({}) as Partial) @@ -32,22 +29,31 @@ export function createApp(db: Database) { const ip = clientIp(c) if (tooManyFailures(ip)) return c.json({ message: '输错次数太多，请 10 分钟后再试' }, 429) const { username, password } = await body<{ username: string; password: string }>(c) - const token = login(db, String(username ?? ''), String(password ?? ''), ip) - if (!token) return c.json({ message: '账号或密码不对' }, 401) - setCookie(c, SESSION_COOKIE, token, { httpOnly: true, sameSite: 'Lax', secure: isHttps(c), path: '/', maxAge: sessionMaxAge }) - return c.json({ user: sessionUser(db, token) }) + const tokens = await login(db, String(username ?? ''), String(password ?? ''), ip) + if (!tokens) return c.json({ message: '账号或密码不对' }, 401) + return c.json(await withUser(tokens)) }) - app.post('/api/logout', (c) => { - const token = sessionToken(c.req.header('cookie')) - if (token) logout(db, token) - deleteCookie(c, SESSION_COOKIE, { path: '/' }) + /** 返回令牌时一并返回用户信息，浏览器不用再查一次 */ + const withUser = async (tokens: Tokens) => ({ ...tokens, user: await tokenUser(db, tokens.accessToken) }) + + // 用刷新令牌换新的访问令牌（刷新令牌也换新的） + app.post('/api/refresh', async (c) => { + const { refreshToken } = await body<{ refreshToken: string }>(c) + const tokens = typeof refreshToken === 'string' ? await refresh(db, refreshToken) : null + if (!tokens) return c.json({ message: '登录已过期，请重新登录' }, 401) + return c.json(await withUser(tokens)) + }) + + app.post('/api/logout', async (c) => { + const { refreshToken } = await body<{ refreshToken: string }>(c) + if (typeof refreshToken === 'string') logout(db, refreshToken) return c.json({}) }) - // 其余接口都要先登录 + // 其余接口都要先登录（请求头 Authorization: Bearer <令牌>） app.use('/api/*', async (c, next) => { - const user = sessionUser(db, sessionToken(c.req.header('cookie'))) + const user = await tokenUser(db, bearerToken(c.req.header('authorization'))) if (!user) return c.json({ message: '请先登录' }, 401) c.set('user', user) await next() diff --git a/server/src/auth.ts b/server/src/auth.ts index b49e5ef..cc4298c 100644 --- a/server/src/auth.ts +++ b/server/src/auth.ts @@ -1,10 +1,17 @@ -// 登录与会话：账号密码登录后发一个 HttpOnly cookie，数据库只存令牌的哈希。 +// 登录：访问令牌 + 刷新令牌。 +// - 访问令牌：JWT（HS256），15 分钟有效，放在请求头 Authorization: Bearer 里； +// WebSocket 不能带请求头，连接时放在网址参数 token 里。 +// - 刷新令牌：随机字符串，30 天有效，用来换新的访问令牌；数据库只存哈希。每次刷新都换一个新的（旧的立即作废）， +// 一直在用的学生不用重新登录。退出登录删除这个刷新令牌。 +// - 重置密码、删除学生：用户的 token_version 加一（已签发的访问令牌立即失效），并删除他的所有刷新令牌。 +// 签名密钥第一次用到时随机生成，存在数据库里，服务器重启后令牌仍然有效。 // 老师账号只有一个，账号密码来自配置；学生账号由老师导入名单创建。 import type { Database } from 'bun:sqlite' +import { sign, verify } from 'hono/jwt' import { config } from './config' -export const SESSION_COOKIE = 'iot_session' -const SESSION_DAYS = 180 +const ACCESS_SECONDS = 15 * 60 +const REFRESH_DAYS = 30 // 全班通常共用学校的一个出口 IP，上限不能太小，否则几个同学输错就把全班挡在外面 const MAX_FAILURES = 30 const FAILURE_WINDOW_MS = 10 * 60_000 @@ -18,7 +25,10 @@ export interface User { className: string | null } -const hash = (token: string) => new Bun.CryptoHasher('sha256').update(token).digest('hex') +export interface Tokens { + accessToken: string + refreshToken: string +} let warnedDefaultPassword = false @@ -36,6 +46,15 @@ export function ensureTeacher(db: Database) { ).run(config.teacherUsername, password, Date.now()) } +/** JWT 签名密钥：存在 settings 表里，第一次用到时生成 */ +function secret(db: Database): string { + db.query(`INSERT OR IGNORE INTO settings (key, value) VALUES ('jwt_secret', ?)`).run(randomString()) + return db.query<{ value: string }, []>(`SELECT value FROM settings WHERE key = 'jwt_secret'`).get()!.value +} + +const randomString = () => Buffer.from(crypto.getRandomValues(new Uint8Array(32))).toString('base64url') +const hash = (token: string) => new Bun.CryptoHasher('sha256').update(token).digest('hex') + /** 每个 IP 一段时间内的失败次数，防止暴力猜密码 */ const failures = new Map() @@ -49,9 +68,23 @@ export function tooManyFailures(ip: string) { return entry.count >= MAX_FAILURES } -/** 账号密码正确时创建会话，返回令牌（放进 cookie）；不正确返回 null */ -export function login(db: Database, username: string, password: string, ip: string): string | null { - const row = db.query<{ id: number; password: string }, [string]>('SELECT id, password FROM users WHERE username = ?').get(username.trim()) +async function issueTokens(db: Database, userId: number, tokenVersion: number): Promise { + const now = Math.floor(Date.now() / 1000) + const accessToken = await sign({ sub: String(userId), ver: tokenVersion, iat: now, exp: now + ACCESS_SECONDS }, secret(db), 'HS256') + const refreshToken = randomString() + db.query('INSERT INTO refresh_tokens (token_hash, user_id, expires_at) VALUES (?, ?, ?)').run( + hash(refreshToken), + userId, + Date.now() + REFRESH_DAYS * 86_400_000, + ) + return { accessToken, refreshToken } +} + +/** 账号密码正确时签发令牌；不正确返回 null */ +export async function login(db: Database, username: string, password: string, ip: string): Promise { + const row = db + .query<{ id: number; password: string; token_version: number }, [string]>('SELECT id, password, token_version FROM users WHERE username = ?') + .get(username.trim()) if (!row || row.password !== password) { const entry = failures.get(ip) ?? { count: 0, since: Date.now() } entry.count++ @@ -59,47 +92,57 @@ export function login(db: Database, username: string, password: string, ip: stri return null } failures.delete(ip) - const token = Buffer.from(crypto.getRandomValues(new Uint8Array(32))).toString('hex') - db.query('INSERT INTO sessions (token_hash, user_id, created_at) VALUES (?, ?, ?)').run(hash(token), row.id, Date.now()) - return token + return issueTokens(db, row.id, row.token_version) } -export function logout(db: Database, token: string) { - db.query('DELETE FROM sessions WHERE token_hash = ?').run(hash(token)) -} - -/** 删除某个用户的所有会话（重置密码、删除学生时，让他已登录的浏览器失效） */ -export function endSessions(db: Database, userId: number) { - db.query('DELETE FROM sessions WHERE user_id = ?').run(userId) -} - -/** 从 Cookie 请求头取出令牌 */ -export function sessionToken(cookieHeader: string | null | undefined) { - return cookieHeader - ?.split(';') - .map((part) => part.trim().split('=')) - .find(([name]) => name === SESSION_COOKIE)?.[1] -} - -/** 令牌对应的用户；没登录或会话已过期返回 null */ -export function sessionUser(db: Database, token: string | undefined): User | null { - if (!token) return null +/** 用刷新令牌换一对新令牌，旧的刷新令牌作废；无效或过期返回 null */ +export async function refresh(db: Database, refreshToken: string): Promise { const row = db - .query< - { id: number; username: string; name: string; role: User['role']; class_id: number | null; class_name: string | null; created_at: number }, - [string] - >( - `SELECT u.id, u.username, u.name, u.role, u.class_id, c.name AS class_name, s.created_at - FROM sessions s JOIN users u ON u.id = s.user_id LEFT JOIN classes c ON c.id = u.class_id - WHERE s.token_hash = ?`, + .query<{ user_id: number; expires_at: number; token_version: number }, [string]>( + `SELECT r.user_id, r.expires_at, u.token_version FROM refresh_tokens r JOIN users u ON u.id = r.user_id WHERE r.token_hash = ?`, ) - .get(hash(token)) - if (!row) return null - if (Date.now() - row.created_at > SESSION_DAYS * 86_400_000) { - logout(db, token) + .get(hash(refreshToken)) + db.query('DELETE FROM refresh_tokens WHERE token_hash = ?').run(hash(refreshToken)) + if (!row || row.expires_at < Date.now()) return null + // 顺便清掉这个用户已过期的刷新令牌 + db.query('DELETE FROM refresh_tokens WHERE user_id = ? AND expires_at < ?').run(row.user_id, Date.now()) + return issueTokens(db, row.user_id, row.token_version) +} + +/** 退出登录：作废这个刷新令牌（访问令牌 15 分钟后自然过期） */ +export function logout(db: Database, refreshToken: string) { + db.query('DELETE FROM refresh_tokens WHERE token_hash = ?').run(hash(refreshToken)) +} + +/** 让某个用户在所有设备上的登录立即失效（重置密码、删除学生时） */ +export function revokeTokens(db: Database, userId: number) { + db.query('UPDATE users SET token_version = token_version + 1 WHERE id = ?').run(userId) + db.query('DELETE FROM refresh_tokens WHERE user_id = ?').run(userId) +} + +/** 从 Authorization 请求头取出访问令牌 */ +export function bearerToken(header: string | null | undefined) { + return /^Bearer\s+(\S+)$/i.exec(header ?? '')?.[1] +} + +/** 访问令牌对应的用户；令牌无效、过期或已被撤回时返回 null */ +export async function tokenUser(db: Database, accessToken: string | null | undefined): Promise { + if (!accessToken) return null + let payload: { sub?: unknown; ver?: unknown } + try { + payload = (await verify(accessToken, secret(db), 'HS256')) as unknown as { sub?: unknown; ver?: unknown } + } catch { return null } + const row = db + .query< + { id: number; username: string; name: string; role: User['role']; class_id: number | null; class_name: string | null; token_version: number }, + [number] + >( + `SELECT u.id, u.username, u.name, u.role, u.class_id, c.name AS class_name, u.token_version + FROM users u LEFT JOIN classes c ON c.id = u.class_id WHERE u.id = ?`, + ) + .get(Number(payload.sub)) + if (!row || row.token_version !== payload.ver) return null return { id: row.id, username: row.username, name: row.name, role: row.role, classId: row.class_id, className: row.class_name } } - -export const sessionMaxAge = SESSION_DAYS * 86_400 diff --git a/server/src/classes.ts b/server/src/classes.ts index 92bb6fe..ca5702e 100644 --- a/server/src/classes.ts +++ b/server/src/classes.ts @@ -1,6 +1,6 @@ // 班级和学生名单（老师用）。学生账号由老师上传名单导入，密码由老师发放，学生不能自己改。 import type { Database } from 'bun:sqlite' -import { endSessions } from './auth' +import { revokeTokens } from './auth' export interface ClassInfo { id: number @@ -115,7 +115,7 @@ export function importStudents(db: Database, classId: number, rows: ImportRow[]) } if (existing) { update.run(name, classId, password ?? null, existing.id) - if (password) endSessions(db, existing.id) + if (password) revokeTokens(db, existing.id) result.updated++ } else { insert.run(username, name, password ?? generatePassword(), classId, Date.now()) @@ -131,11 +131,11 @@ export function resetPassword(db: Database, studentId: number): string | null { const password = generatePassword() const changed = db.query(`UPDATE users SET password = ? WHERE id = ? AND role = 'student'`).run(password, studentId).changes if (!changed) return null - endSessions(db, studentId) + revokeTokens(db, studentId) return password } -/** 删除学生，连同他的作品和登录会话 */ +/** 删除学生，连同他的作品 */ export function deleteStudent(db: Database, studentId: number) { db.query(`DELETE FROM users WHERE id = ? AND role = 'student'`).run(studentId) } diff --git a/server/src/db.ts b/server/src/db.ts index 021a88c..fc96cef 100644 --- a/server/src/db.ts +++ b/server/src/db.ts @@ -1,4 +1,4 @@ -// SQLite 数据库：账号、班级、登录会话、学生作品。 +// SQLite 数据库：账号、班级、学生作品、平台设置（如 JWT 签名密钥）。 // 表结构用编号迁移：MIGRATIONS 只能在末尾追加，已执行过的不再改动。 import { Database } from 'bun:sqlite' import { mkdirSync } from 'node:fs' @@ -38,6 +38,22 @@ const MIGRATIONS = [ PRIMARY KEY (user_id, key) ); `, + // 登录改用 JWT：短期访问令牌（不存库）+ 长期刷新令牌（只存哈希，可以撤回）。 + // token_version 递增时该用户已签发的访问令牌全部失效（重置密码、删除学生） + ` + DROP TABLE sessions; + ALTER TABLE users ADD COLUMN token_version INTEGER NOT NULL DEFAULT 0; + CREATE TABLE refresh_tokens ( + token_hash TEXT PRIMARY KEY, + user_id INTEGER NOT NULL REFERENCES users (id) ON DELETE CASCADE, + expires_at INTEGER NOT NULL + ); + CREATE INDEX refresh_tokens_user ON refresh_tokens (user_id); + CREATE TABLE settings ( + key TEXT PRIMARY KEY, + value TEXT NOT NULL + ); + `, ] /** 打开数据库并执行未执行过的迁移。path 为 ":memory:" 时用内存数据库（测试用） */ diff --git a/server/src/index.ts b/server/src/index.ts index c94c9f5..7d9fbb5 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -1,6 +1,6 @@ import type { ClientMessage, ServerMessage } from '@iot/shared' import { createApp } from './app' -import { ensureTeacher, sessionToken, sessionUser } from './auth' +import { ensureTeacher, tokenUser } from './auth' import { compileService } from './compile-service' import { config } from './config' import { openDatabase } from './db' @@ -21,9 +21,11 @@ interface SocketData { const server = Bun.serve({ port: config.port, - fetch(req, server) { - if (new URL(req.url).pathname === '/ws') { - if (!sessionUser(db, sessionToken(req.headers.get('cookie')))) return new Response('请先登录', { status: 401 }) + async fetch(req, server) { + const url = new URL(req.url) + if (url.pathname === '/ws') { + // 浏览器的 WebSocket 不能带请求头，令牌放在网址参数里 + if (!(await tokenUser(db, url.searchParams.get('token')))) return new Response('请先登录', { status: 401 }) if (server.upgrade(req, { data: {} })) return return new Response('WebSocket 升级失败', { status: 400 }) } diff --git a/server/test/api.test.ts b/server/test/api.test.ts index 69c191d..05a93cb 100644 --- a/server/test/api.test.ts +++ b/server/test/api.test.ts @@ -13,21 +13,25 @@ beforeEach(() => { app = createApp(db) }) -/** 一个浏览器：记住登录 cookie */ +/** 一个浏览器：记住访问令牌和刷新令牌 */ class Browser { - cookie = '' + accessToken = '' + refreshToken = '' constructor(readonly ip = '10.0.0.1') {} async request(method: string, path: string, json?: unknown) { const headers: Record = { 'x-real-ip': this.ip } - if (this.cookie) headers.cookie = this.cookie + if (this.accessToken) headers.authorization = `Bearer ${this.accessToken}` if (json !== undefined) headers['content-type'] = 'application/json' const response = await app.fetch( new Request(`http://localhost${path}`, { method, headers, body: json === undefined ? undefined : JSON.stringify(json) }), ) - const setCookie = response.headers.get('set-cookie') - if (setCookie) this.cookie = setCookie.split(';')[0] - return { status: response.status, body: (await response.json()) as any } + const body = (await response.json()) as any + if (body?.accessToken) { + this.accessToken = body.accessToken + this.refreshToken = body.refreshToken + } + return { status: response.status, body } } get = (path: string) => this.request('GET', path) @@ -39,6 +43,10 @@ class Browser { login(username: string, password: string) { return this.post('/api/login', { username, password }) } + + refresh(refreshToken = this.refreshToken) { + return this.post('/api/refresh', { refreshToken }) + } } async function teacher() { @@ -147,6 +155,7 @@ describe('班级和名单', () => { const { body } = await t.post(`/api/teacher/students/${id}/reset-password`) expect(body.password).toMatch(/^\d{6}$/) expect((await student.get('/api/me')).status).toBe(401) + expect((await student.refresh()).status).toBe(401) expect((await new Browser().login('2024001', 'abc123')).status).toBe(401) expect((await new Browser().login('2024001', body.password)).status).toBe(200) }) @@ -194,10 +203,38 @@ describe('作品', () => { }) }) -test('退出登录后会话失效', async () => { - const t = await teacher() - const cookie = t.cookie - await t.post('/api/logout') - t.cookie = cookie - expect((await t.get('/api/me')).status).toBe(401) +describe('令牌', () => { + test('登录返回访问令牌和刷新令牌；访问令牌是 15 分钟有效的 JWT', async () => { + const t = await teacher() + const payload = JSON.parse(Buffer.from(t.accessToken.split('.')[1], 'base64url').toString()) + expect(payload.exp - payload.iat).toBe(15 * 60) + expect(t.refreshToken).toMatch(/^[\w-]{43}$/) + }) + + test('刷新：换到新的一对令牌，旧的刷新令牌不能再用', async () => { + const t = await teacher() + const old = t.refreshToken + const refreshed = await t.refresh() + expect(refreshed.status).toBe(200) + expect(refreshed.body.user.role).toBe('teacher') + expect(t.refreshToken).not.toBe(old) + expect((await t.get('/api/me')).status).toBe(200) + expect((await t.refresh(old)).status).toBe(401) + }) + + test('退出登录后刷新令牌作废', async () => { + const t = await teacher() + await t.post('/api/logout', { refreshToken: t.refreshToken }) + expect((await t.refresh()).status).toBe(401) + }) + + test('伪造或改过的访问令牌无效', async () => { + const t = await teacher() + const [header, payload, signature] = t.accessToken.split('.') + const forged = Buffer.from(JSON.stringify({ ...JSON.parse(Buffer.from(payload, 'base64url').toString()), sub: '999' })).toString('base64url') + t.accessToken = `${header}.${forged}.${signature}` + expect((await t.get('/api/me')).status).toBe(401) + t.accessToken = 'not-a-token' + expect((await t.get('/api/me')).status).toBe(401) + }) }) diff --git a/web/src/api.ts b/web/src/api.ts index 0fcba33..1f79147 100644 --- a/web/src/api.ts +++ b/web/src/api.ts @@ -1,5 +1,7 @@ // 调用服务器接口。出错时抛出 ApiError，message 是服务器给的中文说明； -// 登录过期（401）时回到登录页。 +// 请求带上访问令牌（快过期时先刷新）；登录过期（刷新也失败）时回到登录页。 +import { refreshTokens, validAccessToken } from './tokens' + export class ApiError extends Error { constructor( message: string, @@ -13,19 +15,29 @@ export class ApiError extends Error { export const apiHooks = { onUnauthorized: () => {} } export async function api(method: string, path: string, json?: unknown, init?: RequestInit): Promise { - let response: Response - try { - response = await fetch(path, { - method, - headers: json === undefined ? undefined : { 'Content-Type': 'application/json' }, - body: json === undefined ? undefined : JSON.stringify(json), - ...init, - }) - } catch { - throw new ApiError('连不上服务器，请检查网络', 0) - } + const response = await send(method, path, json, init) const data = (await response.json().catch(() => ({}))) as T & { message?: string } if (response.status === 401 && path !== '/api/login') apiHooks.onUnauthorized() if (!response.ok) throw new ApiError(data.message ?? `请求失败（${response.status}）`, response.status) return data } + +/** 发请求并带上访问令牌；令牌被拒绝（401）时刷新一次再重发 */ +async function send(method: string, path: string, json: unknown, init: RequestInit | undefined, retried = false): Promise { + const headers: Record = {} + if (json !== undefined) headers['Content-Type'] = 'application/json' + if (path !== '/api/login') { + const token = await validAccessToken() + if (token) headers.Authorization = `Bearer ${token}` + } + let response: Response + try { + response = await fetch(path, { method, headers, body: json === undefined ? undefined : JSON.stringify(json), ...init }) + } catch { + throw new ApiError('连不上服务器，请检查网络', 0) + } + if (response.status === 401 && path !== '/api/login' && !retried && (await refreshTokens())) { + return send(method, path, json, init, true) + } + return response +} diff --git a/web/src/auth.ts b/web/src/auth.ts index e99b6cd..bd25ec9 100644 --- a/web/src/auth.ts +++ b/web/src/auth.ts @@ -1,6 +1,7 @@ -// 当前登录的用户。页面启动时先问一次服务器，之后登录、退出时更新。 +// 当前登录的用户。页面启动时用保存的令牌问一次服务器，之后登录、退出时更新。 import { ref } from 'vue' import { api } from './api' +import { clearTokens, refreshToken, setTokens, type Tokens } from './tokens' export interface User { id: number @@ -13,18 +14,23 @@ export interface User { export const currentUser = ref(null) -/** 页面启动时调用：已登录（cookie 有效）就取到用户 */ +/** 页面启动时调用：保存的令牌还有效（或能刷新）就取到用户 */ export async function loadCurrentUser() { + if (!refreshToken()) return currentUser.value = await api<{ user: User }>('GET', '/api/me') .then((r) => r.user) .catch(() => null) } export async function login(username: string, password: string) { - currentUser.value = (await api<{ user: User }>('POST', '/api/login', { username, password })).user + const result = await api('POST', '/api/login', { username, password }) + setTokens(result) + currentUser.value = result.user } export async function logout() { - await api('POST', '/api/logout').catch(() => {}) + const token = refreshToken() + clearTokens() currentUser.value = null + if (token) await api('POST', '/api/logout', { refreshToken: token }).catch(() => {}) } diff --git a/web/src/run/session.ts b/web/src/run/session.ts index ea32c93..66ca045 100644 --- a/web/src/run/session.ts +++ b/web/src/run/session.ts @@ -1,4 +1,5 @@ import { reactive, shallowReactive } from 'vue' +import { validAccessToken } from '../tokens' import type { BoardState, ClientMessage, @@ -43,20 +44,24 @@ export function createRunSession() { let actionSentAt = 0 function connect() { - connecting ??= new Promise((resolve) => { - const protocol = location.protocol === 'https:' ? 'wss' : 'ws' - const ws = new WebSocket(`${protocol}://${location.host}/ws`) - socket = ws - ws.onmessage = (event) => handle(JSON.parse(event.data) as ServerMessage) - ws.onopen = () => resolve() - ws.onclose = () => { - state.status = 'stopped' - state.board = null - socket = undefined - connecting = undefined - resolve() - } - }) + connecting ??= validAccessToken().then( + (token) => + new Promise((resolve) => { + const protocol = location.protocol === 'https:' ? 'wss' : 'ws' + // 浏览器的 WebSocket 不能带请求头，访问令牌放在网址参数里（只在建立连接时检查） + const ws = new WebSocket(`${protocol}://${location.host}/ws?token=${encodeURIComponent(token ?? '')}`) + socket = ws + ws.onmessage = (event) => handle(JSON.parse(event.data) as ServerMessage) + ws.onopen = () => resolve() + ws.onclose = () => { + state.status = 'stopped' + state.board = null + socket = undefined + connecting = undefined + resolve() + } + }), + ) return connecting } diff --git a/web/src/tokens.ts b/web/src/tokens.ts new file mode 100644 index 0000000..ad0cf76 --- /dev/null +++ b/web/src/tokens.ts @@ -0,0 +1,95 @@ +// 登录令牌：访问令牌（15 分钟）和刷新令牌（30 天）都放在 localStorage，多个标签页共用。 +// 访问令牌快过期时先用刷新令牌换一对新的；同时有多个请求要刷新时只刷新一次。 +// 刷新令牌每用一次就作废：另一个标签页刚刷新过时，这边的旧令牌会失败，这时改用它存下的新令牌。 + +const ACCESS_KEY = 'iot-sim:access-token' +const REFRESH_KEY = 'iot-sim:refresh-token' + +export interface Tokens { + accessToken: string + refreshToken: string +} + +function read(key: string) { + try { + return localStorage.getItem(key) + } catch { + return null + } +} + +export function setTokens(tokens: Tokens) { + try { + localStorage.setItem(ACCESS_KEY, tokens.accessToken) + localStorage.setItem(REFRESH_KEY, tokens.refreshToken) + } catch { + // 浏览器禁用了本地存储：只能本次页面内有效 + memory = tokens + } +} + +export function clearTokens() { + memory = null + try { + localStorage.removeItem(ACCESS_KEY) + localStorage.removeItem(REFRESH_KEY) + } catch { + // 忽略 + } +} + +/** 本地存储不可用时退回内存 */ +let memory: Tokens | null = null + +const accessToken = () => read(ACCESS_KEY) ?? memory?.accessToken ?? null +export const refreshToken = () => read(REFRESH_KEY) ?? memory?.refreshToken ?? null + +/** 访问令牌是否会在一分钟内过期（读 JWT 里的 exp，不校验签名） */ +function expiresSoon(token: string) { + try { + const payload = JSON.parse(atob(token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/'))) as { exp?: number } + return !payload.exp || payload.exp * 1000 < Date.now() + 60_000 + } catch { + return true + } +} + +let refreshing: Promise | null = null + +/** 用刷新令牌换新令牌；返回是否成功。登录已过期（服务器拒绝）时清掉令牌 */ +export function refreshTokens(): Promise { + refreshing ??= (async () => { + const tried = refreshToken() + if (!tried) return false + let response: Response + try { + response = await fetch('/api/refresh', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ refreshToken: tried }), + }) + } catch { + return false // 网络问题：保留令牌，下次再试 + } + if (response.ok) { + setTokens((await response.json()) as Tokens) + return true + } + // 另一个标签页已经用这个刷新令牌换过了新的 + const latest = refreshToken() + if (latest && latest !== tried) return true + clearTokens() + return false + })().finally(() => { + refreshing = null + }) + return refreshing +} + +/** 可用的访问令牌：快过期时先刷新；没登录或登录已过期返回 null */ +export async function validAccessToken(): Promise { + const token = accessToken() + if (token && !expiresSoon(token)) return token + if (!(await refreshTokens())) return null + return accessToken() +}