# 小程序用户认证Starter

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

## 功能特性

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

## 技术栈

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

## 项目结构

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

## 快速开始

### 1. 安装依赖

```bash
cd mini
pnpm install
```

### 2. 配置环境变量

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

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

### 3. 启动开发服务器

```bash
# 微信小程序
npm run dev:weapp

# H5
npm run dev:h5
```

### 4. 构建生产版本

```bash
# 微信小程序
npm run build:weapp

# H5
npm run build:h5
```

## API接口

### 认证相关
- POST `/api/v1/auth/login/password` - 密码登录
- 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` - 删除用户

## 使用说明

### 认证状态管理

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

```typescript
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客户端进行网络请求：

```typescript
import { authApi, userApi } from '@/utils/api'

// 登录
const response = await authApi.login({
  username: 'username',
  password: 'password'
})

// 获取用户列表
const users = await userApi.getUsers()

// 更新用户信息
const updated = await userApi.updateUser(1, { 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