第13章：构建一个电商App（简化版）

用户认证与个人中心

1. 功能概述

  • 核心目标：实现用户注册/登录、个人信息管理、订单查看等基础功能
  • 技术栈：
    • ArkTS UI组件（Form、Input、Button等）
    • 状态管理（AppStorage/LocalStorage）
    • 网络请求（HTTP API调用）
    • 数据持久化（用户Token存储）

2. 认证流程设计

2.1 注册模块

// 示例：注册表单组件
@Component
struct RegisterForm {
  @State username: string = ''
  @State password: string = ''
  
  build() {
    Column() {
      TextInput({ placeholder: '用户名' })
        .onChange((value: string) => { this.username = value })
      TextInput({ placeholder: '密码', type: InputType.Password })
        .onChange((value: string) => { this.password = value })
      Button('注册')
        .onClick(() => {
          // 调用注册API
          registerUser(this.username, this.password)
        })
    }
  }
}

2.2 登录模块

  • JWT Token处理流程：
    sequenceDiagram
  用户->>前端: 输入账号密码
  前端->>后端: POST /login
  后端-->>前端: 返回JWT Token
  前端->>本地存储: 持久化Token
  前端->>所有请求: 携带Authorization头

3. 个人中心实现

3.1 页面结构

@Component
struct UserCenter {
  @StorageLink('userInfo') userInfo: UserData
  
  build() {
    Column() {
      Avatar({ src: this.userInfo.avatar })
      Text(this.userInfo.nickname)
        .fontSize(20)
      
      List() {
        ListItem() {
          Row() {
            Image($r('app.media.orders'))
            Text('我的订单')
          }
        }
        .onClick(() => { /* 跳转订单页 */ })
        
        ListItem() {
          Row() {
            Image($r('app.media.settings'))
            Text('账户设置')
          }
        }
      }
    }
  }
}

3.2 关键功能

  1. 信息展示：

    • 从全局状态管理读取用户数据
    • 实时更新头像/昵称等字段

  2. 安全退出：

    function logout() {
  // 清除本地凭证
  AppStorage.Delete('token')
  // 跳转到登录页
  router.replaceUrl({ url: 'pages/Login' })
}

4. 安全实践

  • 敏感数据保护：
    • 密码字段使用加密传输（HTTPS+加密）
    • Token存储采用加密存储方案
  • 权限控制：
    // 路由守卫示例
function checkAuth(): boolean {
  return !!AppStorage.Get('token')
}

@Entry
@Component
struct ProtectedPage {
  aboutToAppear() {
    if (!checkAuth()) {
      router.replaceUrl({ url: 'pages/Login' })
    }
  }
}

5. 常见问题解决方案

问题现象可能原因解决方案
登录后状态不更新状态未全局同步使用AppStorage统一管理
Token过期无提示未拦截401响应添加全局请求拦截器
用户头像加载慢未做缓存处理实现本地图片缓存机制

6. 扩展功能建议

  1. 第三方登录：集成微信/支付宝快捷登录
  2. 生物认证：支持指纹/面部识别
  3. 安全中心：密码修改、设备管理等功能

7. 测试要点

  • 边界测试：超长用户名/密码输入
  • 并发测试：多设备同时登录
  • 异常测试：网络中断时的降级处理

最佳实践提示：建议采用模块化设计，将认证逻辑封装为独立SDK，便于多项目复用。

Last Updated::