小程序开发日记③：个人中心、登录与资料维护

1. 未登录与已登录是两套体验#

未登录用户可以浏览一级页面，但访问地址簿、订单和消息时会被引导进行手机号授权。登录后，个人中心展示头像、昵称、脱敏手机号、进行中订单和历史订单数量。

1
const maskedMobile = computed(() => {
2
  const mobile = String(auth.mobile || '')
3
  return /^(\d{3})\d{4}(\d{4})$/.test(mobile)
4
    ? mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
5
    : mobile || '未绑定手机号'
6
})

脱敏不应依赖模板截字符串，统一计算属性更容易复用和测试。

2. Auth Store 的职责#

store/modules/auth.js 保存 token、用户资料和头像临时地址，并暴露登录、退出、刷新资料、修改昵称和上传头像的方法。

1
const isLogin = computed(() => !!token.value)
2
const userId = computed(() => userInfo.value?.userId || null)
3
const nickname = computed(() => userInfo.value?.nickname || DEFAULT_USER_NICKNAME)

页面不直接操作本地存储。Store 在登录成功后同时更新响应式状态和持久化数据，退出时清理 token、资料与鉴权图片缓存。

3. 微信登录和手机号授权#

登录流程由 wxLoginFlow 与 phoneLoginFlow 封装。页面只负责获得授权事件并触发流程：

1
wx.login 获取临时 code
2
        ↓
3
手机号授权凭证
4
        ↓
5
后端换取 token 与用户资料
6
        ↓
7
保存认证状态并刷新头像

把平台 API 包装在 utils/wx 中，可以避免页面里到处出现回调式代码，也方便处理用户拒绝授权、会话失效等分支。

4. Token 失效后的刷新#

请求层遇到 401 时，若存在 token 和刷新器，会尝试刷新并重放原请求。多个请求同时 401 时共用一个 refreshPromise：

1
if (!refreshPromise) {
2
  refreshPromise = tokenRefresher()
3
    .finally(() => { refreshPromise = null })
4
}
5
return refreshPromise

这叫“单飞”控制。否则首页、消息和个人资料可能同时刷新三次 token，后端刚发的新 token 又被后一个响应覆盖。

刷新失败后统一清理认证并弹出登录提示，页面不需要各写一套 401 处理。

5. 头像为什么要鉴权下载#

头像接口不是公开静态地址，需要携带 token 获取临时文件。Store 使用 getAuthenticatedImage 下载，并维护缓存键 current-user-avatar。

上传新头像后，页面直接采用上传接口返回的最新资料，再强制刷新临时图。头像刷新使用 Promise 链串行执行：

1
avatarRefreshChain = avatarRefreshChain
2
  .catch(() => '')
3
  .then(() => getAuthenticatedImage(url, { cacheKey, force: true }))

这是为了避免 onShow 的旧请求晚于上传后的新请求返回，把新头像又覆盖回旧图。

6. 昵称和订单统计#

昵称通过小程序昵称输入能力采集，提交前执行长度和内容校验。保存成功后重新拉取 profile，以服务端结果为准。

个人中心的进行中/历史订单统计来自完整订单列表，再通过 isHistoryOrder 分类：

1
orderStats.value = orders.reduce((stats, order) => {
2
  if (isHistoryOrder(order)) stats.history += 1
3
  else stats.active += 1
4
  return stats
5
}, { active: 0, history: 0 })

下拉刷新时资料与统计通过 Promise.allSettled 并行加载，一项失败不影响另一项更新。

7. 本篇小结#