From 63c18d89c21cade8101fb7cce8f098f83e332af9 Mon Sep 17 00:00:00 2001 From: WorkBuddy Date: Tue, 22 Sep 2026 19:08:16 +0800 Subject: [PATCH] =?UTF-8?q?fix(miniapp):=20=E4=BF=AE=E5=A4=8D=E5=85=A8?= =?UTF-8?q?=E7=AB=99=20401=20=E2=80=94=E2=80=94=20=E8=AE=A4=E8=AF=81?= =?UTF-8?q?=E9=93=BE=E5=AD=97=E6=AE=B5=E5=90=8D=E4=B8=8D=E4=B8=80=E8=87=B4?= =?UTF-8?q?=20+=20=E9=A6=96=E9=A1=B5=20onRetry=20=E7=BC=BA=E5=A4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 根因（读码 + 本机后端实测坐实）： - 后端登录/刷新返回 accessToken，前端 authStore 却读 result.token → accessToken 从未落库 → 每个请求都不带 Authorization → 全站 401（首页无法加载）。 - /auth/refresh 少传 userId：后端以 userId 定位 Redis refresh token， 缺失即 BAD_REQUEST → HTTP 400（实测 {refreshToken} 体 → 400）。 - 首页 index.wxml 绑定 bind:retry="onRetry"（ui-error-state 触发 retry 事件）， 但 index.ts 无该方法 → 控制台报错、错误页「重新加载」失效。 - app.globalData.token 从未赋值，多页直读它拼 Authorization → Bearer undefined。 修复： - authStore：登录/刷新改用 result.accessToken；刷新传 this.state.userId。 - authService.refresh(userId)：发送 { userId, refreshToken }。 - pages/index：新增 onRetry；onLoad 订阅 authStore（expired → 回登录引导； 刷新成功且停在错误态 → 自动重载）；onUnload 退订。 - utils/api：saveToken/clearToken/getToken 同步 app.globalData.token，兼容旧页面。 守卫补强： - ui-tests/miniapp-auth-contracts.mjs 原仅覆盖 hydrate，对字段名缺陷零覆盖。 新增行为断言：登录后 storage.accessToken 必须等于后端 accessToken； 刷新请求体必须含 userId + refreshToken 并持久化新 accessToken。 已双向负向注入验证判别力（改回 result.token / 去掉 userId 均 exit 1）。 验证： - tsc --noEmit -p miniapp/tsconfig.json → exit 0，零错误。 - scripts/run-ui-contracts.mjs → 18/18 PASS。 - 本机 8085 /auth/refresh 三态实测：{} → 400；{refreshToken} → 400； {userId,refreshToken} → 500（进入服务校验，非 400）。 - 未验证：开发者工具内实际登录→首页链路（本机无法驱动 devtools，待用户复测）。 --- miniapp/pages/index/index.ts | 23 +++++++++++++ miniapp/services/authService.js | 9 ++++-- miniapp/stores/authStore.js | 8 +++-- miniapp/utils/api.js | 8 +++++ ui-tests/miniapp-auth-contracts.mjs | 50 ++++++++++++++++++++++++++++- 5 files changed, 91 insertions(+), 7 deletions(-) diff --git a/miniapp/pages/index/index.ts b/miniapp/pages/index/index.ts index d6a715b..2cde0bb 100644 --- a/miniapp/pages/index/index.ts +++ b/miniapp/pages/index/index.ts @@ -61,6 +61,17 @@ Page({ }, onLoad() { + // 订阅登录态：会话失效时回到登录引导；刷新成功且首页停在错误态时自动重试。 + this._unsubAuth = authStore.subscribe((state) => { + if (state.authStatus === 'expired') { + this.setData({ loading: false, loadError: false, recState: 'idle' }) + this.checkAuthAndLoad() + return + } + if (state.isLoggedIn && this.data.loadError && !this.data.loading) { + this.loadHomeData() + } + }) this.checkAuthAndLoad() }, @@ -70,6 +81,18 @@ Page({ } }, + onUnload() { + if (typeof this._unsubAuth === 'function') { + this._unsubAuth() + this._unsubAuth = null + } + }, + + /** 错误态「重试」按钮：重新鉴权判断并加载首页 */ + onRetry() { + this.checkAuthAndLoad() + }, + onPullDownRefresh() { this.loadHomeData().finally(() => wx.stopPullDownRefresh()) }, diff --git a/miniapp/services/authService.js b/miniapp/services/authService.js index 95eba59..2832114 100644 --- a/miniapp/services/authService.js +++ b/miniapp/services/authService.js @@ -27,11 +27,14 @@ function bindPhone(payload) { /** * 刷新 Token（API_INVENTORY 行 10） - * @returns {Promise<{ token: string, refreshToken: string, expiresIn: number }>} + * 后端 /auth/refresh 要求 body 同时包含 userId 与 refreshToken（userId 用于定位 + * Redis 中存储的 refresh token），缺少任一都会返回 400。故此处必须带 userId。 + * @param {string} userId 当前登录用户 ID（来自 AuthStore.state.userId） + * @returns {Promise<{ accessToken: string, refreshToken: string, expiresIn: number }>} */ -function refresh() { +function refresh(userId) { const refreshToken = api.getRefreshToken(); - return api.post('/auth/refresh', { refreshToken }); + return api.post('/auth/refresh', { userId, refreshToken }); } /** diff --git a/miniapp/stores/authStore.js b/miniapp/stores/authStore.js index b659a12..512c4f5 100644 --- a/miniapp/stores/authStore.js +++ b/miniapp/stores/authStore.js @@ -61,7 +61,8 @@ class AuthStore extends BaseStore { this.setState({ authStatus: 'logging_in', lastError: null }); try { const result = await authService.wechatLogin({ code }); - api.saveToken(result.token, result.refreshToken); + // 注意：后端登录返回字段为 accessToken（非 token），必须用 accessToken 才能持久化成功。 + api.saveToken(result.accessToken, result.refreshToken); const patch = { isLoggedIn: true, userId: result.userId || null, @@ -102,8 +103,9 @@ class AuthStore extends BaseStore { this._refreshPromise = (async () => { this.setState({ authStatus: 'refreshing' }); try { - const result = await authService.refresh(); - api.saveToken(result.token, result.refreshToken); + // 后端 /auth/refresh 需要 userId；后端返回 accessToken（非 token）。 + const result = await authService.refresh(this.state.userId); + api.saveToken(result.accessToken, result.refreshToken); this.setState({ authStatus: 'idle', isLoggedIn: true }); return true; } catch (err) { diff --git a/miniapp/utils/api.js b/miniapp/utils/api.js index 21ff573..dc9a478 100644 --- a/miniapp/utils/api.js +++ b/miniapp/utils/api.js @@ -78,6 +78,9 @@ class ApiClient { try { this.token = wx.getStorageSync('accessToken') || null; this._refreshToken = wx.getStorageSync('refreshToken') || null; + // 冷启动时同步给直接读 app.globalData.token 的旧页面 + const app = typeof getApp === 'function' ? getApp() : null; + if (app && app.globalData) app.globalData.token = this.token; } catch (e) { // ignore } @@ -101,6 +104,9 @@ class ApiClient { this._refreshToken = refreshToken; wx.setStorageSync('accessToken', token); wx.setStorageSync('refreshToken', refreshToken); + // 同步给直接读 app.globalData.token 的旧页面（否则它们发 Bearer undefined → 401） + const app = typeof getApp === 'function' ? getApp() : null; + if (app && app.globalData) app.globalData.token = token; } /** 清除 token（登出/Session 失效后调用） */ @@ -109,6 +115,8 @@ class ApiClient { this._refreshToken = null; wx.removeStorageSync('accessToken'); wx.removeStorageSync('refreshToken'); + const app = typeof getApp === 'function' ? getApp() : null; + if (app && app.globalData) app.globalData.token = null; } /** 生成请求 ID（用于链路追踪） */ diff --git a/ui-tests/miniapp-auth-contracts.mjs b/ui-tests/miniapp-auth-contracts.mjs index 681651c..cf0d4a4 100644 --- a/ui-tests/miniapp-auth-contracts.mjs +++ b/ui-tests/miniapp-auth-contracts.mjs @@ -1,22 +1,70 @@ import assert from 'node:assert/strict' import { createRequire } from 'node:module' +/** + * 小程序鉴权契约守卫 + * + * 覆盖三类此前只在真机/开发者工具上才会暴露的缺陷（2026-09-22 首页 401 事故）： + * 1. hydrate：没有 access token 时不得恢复登录态。 + * 2. 登录/刷新：后端返回字段是 accessToken（不是 token），若字段名写错， + * token 永远写不进 storage → 每个请求都不带 Authorization → 全站 401。 + * 3. 刷新：后端 /auth/refresh 需要 userId（用于定位 Redis 中的 refresh token）， + * 缺失会直接 400，导致刷新失败、登录态被误清。 + */ const removed = [] +const storage = {} globalThis.wx = { getStorageSync(key) { + if (key in storage) return storage[key] if (key === 'isLoggedIn') return { isLoggedIn: true, userId: 'stale-user' } return '' }, + setStorageSync(key, value) { + storage[key] = value + }, removeStorageSync(key) { removed.push(key) + delete storage[key] }, } const require = createRequire(import.meta.url) + +// ---- 1. hydrate：无 token 不得恢复登录态 ---- const authStore = require('../miniapp/stores/authStore.js') authStore.hydrate() - assert.equal(authStore.state.isLoggedIn, false, '没有 access token 时不得恢复登录态') assert.ok(removed.includes('isLoggedIn'), '应清理失真的登录快照') +const api = require('../miniapp/utils/api.js') + +// ---- 2. 登录：必须持久化 accessToken（后端字段名为 accessToken）---- +api.post = async () => ({ accessToken: 'ACC-1', refreshToken: 'REF-1', userId: 'u-1', expiresIn: 7200 }) +await authStore.loginWithWechat('wx-code') +assert.equal( + storage.accessToken, + 'ACC-1', + '登录后必须把后端返回的 accessToken 写入 storage（字段名写成 token 会落空 → 全站 401）', +) +assert.equal(storage.refreshToken, 'REF-1', '登录后必须写入 refreshToken') + +// ---- 3. 刷新：必须带 userId + refreshToken，并持久化新的 accessToken ---- +let refreshBody = null +api.post = async (url, body) => { + if (url === '/auth/refresh') { + refreshBody = body + return { accessToken: 'ACC-2', refreshToken: 'REF-2', expiresIn: 7200 } + } + return {} +} +await authStore.refresh() +assert.ok(refreshBody, '刷新必须发起 /auth/refresh 请求') +assert.equal( + refreshBody.userId, + 'u-1', + '刷新请求必须携带 userId（后端据此定位 Redis refresh token，缺失会返回 400）', +) +assert.equal(refreshBody.refreshToken, 'REF-1', '刷新请求必须携带 refreshToken') +assert.equal(storage.accessToken, 'ACC-2', '刷新成功后必须持久化新的 accessToken') + console.log('Miniapp auth contracts passed')