file-starter/mini

小程序用户认证Starter

这是一个基于Taro的小程序用户认证starter项目，集成了完整的用户登录、注册功能，并连接到后端API。

功能特性

• ✅ 用户注册和登录
• ✅ JWT Token认证
• ✅ 用户信息管理
• ✅ 响应式设计
• ✅ 错误处理
• ✅ 本地存储

技术栈

• 框架: Taro 4.1.4
• 语言: TypeScript
• 样式: CSS
• HTTP请求: Taro.request
• 状态管理: 本地存储

项目结构

mini/
├── src/
│   ├── pages/
│   │   ├── index/          # 首页
│   │   ├── login/          # 登录页
│   │   └── register/       # 注册页
│   ├── utils/
│   │   └── auth.ts         # 认证工具
│   ├── api.ts              # API客户端
│   └── app.config.ts       # 小程序配置
├── config/
│   ├── dev.ts              # 开发配置
│   ├── prod.ts             # 生产配置
│   └── index.ts            # 通用配置
├── .env.development        # 开发环境变量
├── .env.production         # 生产环境变量
└── package.json

快速开始

1. 安装依赖

cd mini
pnpm install

2. 配置环境变量

编辑 .env.development 和 .env.production 文件，设置API地址：

API_BASE_URL=http://localhost:3000
API_VERSION=v1

3. 启动开发服务器

# 微信小程序
npm run dev:weapp

# H5
npm run dev:h5

4. 构建生产版本

# 微信小程序
npm run build:weapp

# H5
npm run build:h5

API接口

认证相关

• POST /api/v1/auth/login - 密码登录
• POST /api/v1/auth/register - 用户注册
• GET /api/v1/auth/me - 获取当前用户信息
• POST /api/v1/auth/logout - 退出登录

用户相关

• GET /api/v1/users - 获取用户列表
• GET /api/v1/users/:id - 获取单个用户
• PUT /api/v1/users/:id - 更新用户信息
• DELETE /api/v1/users/:id - 删除用户

使用说明

认证状态管理

项目提供了完整的认证状态管理工具：

import { authManager } from '@/utils/auth'

// 检查登录状态
const isLoggedIn = authManager.isLoggedIn()

// 获取用户信息
const user = authManager.getUserInfo()

// 获取token
const token = authManager.getToken()

// 登录
const user = await authManager.login('username', 'password')

// 注册
const user = await authManager.register({
  username: 'newuser',
  password: 'password123',
  email: 'user@example.com'
})

// 退出
await authManager.logout()

API调用

使用封装的API客户端进行网络请求：

import { authClient } from '@/api'

// 登录
const response = await authClient.login.$post({
  json: {
    username: 'username',
    password: 'password'
  }
})

// 获取用户列表
const users = await userClient.$get({})

// 更新用户信息
const updated = await userClient[':id'].$put({
  param: { id: 1 },
  json: { username: 'newname' }
})

环境配置

开发环境

• API地址: http://localhost:3000
• 环境变量文件: .env.development

生产环境

• API地址: https://your-domain.com
• 环境变量文件: .env.production

注意事项

1. CORS配置: 确保后端API已配置CORS，允许小程序域名访问
2. HTTPS: 生产环境必须使用HTTPS
3. 域名配置: 微信小程序需要在后台配置request合法域名
4. 存储限制: 小程序本地存储有大小限制，避免存储过多数据

常见问题

1. 网络请求失败

• 检查API地址配置是否正确
• 确保后端服务已启动
• 检查网络连接

2. 跨域问题

• 在后端配置CORS
• 使用代理服务器（开发环境）

3. 登录状态丢失

• 检查token是否正确存储
• 确认token有效期

扩展建议

1. 添加微信登录: 集成微信OAuth
2. 手机号登录: 添加短信验证码功能
3. 第三方登录: 支持QQ、微博等
4. 用户头像: 添加头像上传功能
5. 用户权限: 实现角色权限管理

许可证

MIT License