fix(miniapp): 修复全站 401 —— 认证链字段名不一致 + 首页 onRetry 缺失
根因(读码 + 本机后端实测坐实):
- 后端登录/刷新返回 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,待用户复测)。
This commit is contained in:
@@ -61,6 +61,17 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
onLoad() {
|
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()
|
this.checkAuthAndLoad()
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -70,6 +81,18 @@ Page({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onUnload() {
|
||||||
|
if (typeof this._unsubAuth === 'function') {
|
||||||
|
this._unsubAuth()
|
||||||
|
this._unsubAuth = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 错误态「重试」按钮:重新鉴权判断并加载首页 */
|
||||||
|
onRetry() {
|
||||||
|
this.checkAuthAndLoad()
|
||||||
|
},
|
||||||
|
|
||||||
onPullDownRefresh() {
|
onPullDownRefresh() {
|
||||||
this.loadHomeData().finally(() => wx.stopPullDownRefresh())
|
this.loadHomeData().finally(() => wx.stopPullDownRefresh())
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -27,11 +27,14 @@ function bindPhone(payload) {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 刷新 Token(API_INVENTORY 行 10)
|
* 刷新 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();
|
const refreshToken = api.getRefreshToken();
|
||||||
return api.post('/auth/refresh', { refreshToken });
|
return api.post('/auth/refresh', { userId, refreshToken });
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -61,7 +61,8 @@ class AuthStore extends BaseStore {
|
|||||||
this.setState({ authStatus: 'logging_in', lastError: null });
|
this.setState({ authStatus: 'logging_in', lastError: null });
|
||||||
try {
|
try {
|
||||||
const result = await authService.wechatLogin({ code });
|
const result = await authService.wechatLogin({ code });
|
||||||
api.saveToken(result.token, result.refreshToken);
|
// 注意:后端登录返回字段为 accessToken(非 token),必须用 accessToken 才能持久化成功。
|
||||||
|
api.saveToken(result.accessToken, result.refreshToken);
|
||||||
const patch = {
|
const patch = {
|
||||||
isLoggedIn: true,
|
isLoggedIn: true,
|
||||||
userId: result.userId || null,
|
userId: result.userId || null,
|
||||||
@@ -102,8 +103,9 @@ class AuthStore extends BaseStore {
|
|||||||
this._refreshPromise = (async () => {
|
this._refreshPromise = (async () => {
|
||||||
this.setState({ authStatus: 'refreshing' });
|
this.setState({ authStatus: 'refreshing' });
|
||||||
try {
|
try {
|
||||||
const result = await authService.refresh();
|
// 后端 /auth/refresh 需要 userId;后端返回 accessToken(非 token)。
|
||||||
api.saveToken(result.token, result.refreshToken);
|
const result = await authService.refresh(this.state.userId);
|
||||||
|
api.saveToken(result.accessToken, result.refreshToken);
|
||||||
this.setState({ authStatus: 'idle', isLoggedIn: true });
|
this.setState({ authStatus: 'idle', isLoggedIn: true });
|
||||||
return true;
|
return true;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
|||||||
@@ -78,6 +78,9 @@ class ApiClient {
|
|||||||
try {
|
try {
|
||||||
this.token = wx.getStorageSync('accessToken') || null;
|
this.token = wx.getStorageSync('accessToken') || null;
|
||||||
this._refreshToken = wx.getStorageSync('refreshToken') || 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) {
|
} catch (e) {
|
||||||
// ignore
|
// ignore
|
||||||
}
|
}
|
||||||
@@ -101,6 +104,9 @@ class ApiClient {
|
|||||||
this._refreshToken = refreshToken;
|
this._refreshToken = refreshToken;
|
||||||
wx.setStorageSync('accessToken', token);
|
wx.setStorageSync('accessToken', token);
|
||||||
wx.setStorageSync('refreshToken', refreshToken);
|
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 失效后调用) */
|
/** 清除 token(登出/Session 失效后调用) */
|
||||||
@@ -109,6 +115,8 @@ class ApiClient {
|
|||||||
this._refreshToken = null;
|
this._refreshToken = null;
|
||||||
wx.removeStorageSync('accessToken');
|
wx.removeStorageSync('accessToken');
|
||||||
wx.removeStorageSync('refreshToken');
|
wx.removeStorageSync('refreshToken');
|
||||||
|
const app = typeof getApp === 'function' ? getApp() : null;
|
||||||
|
if (app && app.globalData) app.globalData.token = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 生成请求 ID(用于链路追踪) */
|
/** 生成请求 ID(用于链路追踪) */
|
||||||
|
|||||||
@@ -1,22 +1,70 @@
|
|||||||
import assert from 'node:assert/strict'
|
import assert from 'node:assert/strict'
|
||||||
import { createRequire } from 'node:module'
|
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 removed = []
|
||||||
|
const storage = {}
|
||||||
globalThis.wx = {
|
globalThis.wx = {
|
||||||
getStorageSync(key) {
|
getStorageSync(key) {
|
||||||
|
if (key in storage) return storage[key]
|
||||||
if (key === 'isLoggedIn') return { isLoggedIn: true, userId: 'stale-user' }
|
if (key === 'isLoggedIn') return { isLoggedIn: true, userId: 'stale-user' }
|
||||||
return ''
|
return ''
|
||||||
},
|
},
|
||||||
|
setStorageSync(key, value) {
|
||||||
|
storage[key] = value
|
||||||
|
},
|
||||||
removeStorageSync(key) {
|
removeStorageSync(key) {
|
||||||
removed.push(key)
|
removed.push(key)
|
||||||
|
delete storage[key]
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const require = createRequire(import.meta.url)
|
const require = createRequire(import.meta.url)
|
||||||
|
|
||||||
|
// ---- 1. hydrate:无 token 不得恢复登录态 ----
|
||||||
const authStore = require('../miniapp/stores/authStore.js')
|
const authStore = require('../miniapp/stores/authStore.js')
|
||||||
authStore.hydrate()
|
authStore.hydrate()
|
||||||
|
|
||||||
assert.equal(authStore.state.isLoggedIn, false, '没有 access token 时不得恢复登录态')
|
assert.equal(authStore.state.isLoggedIn, false, '没有 access token 时不得恢复登录态')
|
||||||
assert.ok(removed.includes('isLoggedIn'), '应清理失真的登录快照')
|
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')
|
console.log('Miniapp auth contracts passed')
|
||||||
|
|||||||
Reference in New Issue
Block a user