feat(global-header): 重构全局头部组件及样式优化
- 完全重写 GlobalHeader 组件结构，改用 div 语义及自定义样式替代原antd a-menu - 新增 Logo 区域包含图标和标题，支持点击跳转首页功能 - 实现导航菜单动态渲染，根据路由权限过滤显示 - 用户区域支持未登录和已登录两种状态切换 - 未登录时展示登录、注册按钮，支持路由跳转 - 已登录时显示用户头像、用户名及下拉菜单，包含个人中心、设置和退出登录操作 - 引入 Arco Design 图标组件优化视觉表现 - 完善登出流程，清理本地Token并提示用户 - 优化响应式布局和交互体验，提升用户界面整体一致性与可用性
This commit is contained in:
216
docs/proxy-config.md
Normal file
216
docs/proxy-config.md
Normal file
@@ -0,0 +1,216 @@
|
||||
# API 代理配置说明
|
||||
|
||||
## 配置完成
|
||||
|
||||
✅ 已成功配置 Vite API 代理转发功能
|
||||
|
||||
## 配置详情
|
||||
|
||||
### 1. Vite 代理配置 ([vite.config.ts](../../vite.config.ts:28-36))
|
||||
|
||||
```typescript
|
||||
server: {
|
||||
host: "0.0.0.0",
|
||||
port: 3000,
|
||||
open: true,
|
||||
// API 代理配置
|
||||
proxy: {
|
||||
// 代理所有 /api 开头的请求
|
||||
'/api': {
|
||||
target: 'http://localhost:8085', // 后端服务器地址
|
||||
changeOrigin: true, // 改变请求头中的 origin
|
||||
secure: false, // 支持 https
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 环境配置更新 ([.env.dev](../../.env.dev))
|
||||
|
||||
```env
|
||||
VITE_API_URL=/api # 改为相对路径，使用代理
|
||||
```
|
||||
|
||||
## 工作原理
|
||||
|
||||
```
|
||||
前端请求流程：
|
||||
┌─────────────┐
|
||||
│ 前端应用 │
|
||||
│ localhost:3001 │
|
||||
└──────┬──────┘
|
||||
│ 请求: /api/v1/auth/login
|
||||
↓
|
||||
┌──────────────┐
|
||||
│ Vite 代理 │
|
||||
│ 自动转发 │
|
||||
└──────┬───────┘
|
||||
│ 转发到: http://localhost:8085/api/v1/auth/login
|
||||
↓
|
||||
┌──────────────┐
|
||||
│ 后端服务器 │
|
||||
│ localhost:8085 │
|
||||
└──────────────┘
|
||||
```
|
||||
|
||||
### 请求示例
|
||||
|
||||
**前端发起请求：**
|
||||
```typescript
|
||||
// axios baseURL 为 '/api'
|
||||
await login({ userAccount: 'admin', userPassword: 'password' })
|
||||
|
||||
// 实际请求 URL: http://localhost:3001/api/v1/auth/login
|
||||
```
|
||||
|
||||
**Vite 代理自动转发：**
|
||||
```
|
||||
http://localhost:3001/api/v1/auth/login
|
||||
↓
|
||||
http://localhost:8085/api/v1/auth/login
|
||||
```
|
||||
|
||||
## 配置说明
|
||||
|
||||
### proxy 配置项
|
||||
|
||||
- **`target`**: 后端服务器地址（`http://localhost:8085`）
|
||||
- **`changeOrigin`**: 修改请求头的 origin，避免后端 CORS 限制
|
||||
- **`secure`**: 是否验证 SSL 证书（开发环境设为 false）
|
||||
- **`rewrite`**: （可选）重写请求路径
|
||||
|
||||
### 路径重写示例
|
||||
|
||||
如果后端 API 不包含 `/api` 前缀，可以使用 `rewrite`：
|
||||
|
||||
```typescript
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8085',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
这样前端请求 `/api/v1/auth/login` 会被转发为 `http://localhost:8085/v1/auth/login`
|
||||
|
||||
## 已配置的 API
|
||||
|
||||
根据后端文档 ([auth-api.md](../../auth-api.md))，以下接口已配置代理：
|
||||
|
||||
- ✅ `POST /api/v1/auth/login` - 用户登录
|
||||
- ✅ `POST /api/v1/auth/refresh` - 刷新令牌
|
||||
- ✅ `POST /api/v1/auth/auth` - 获取访问令牌
|
||||
- ✅ `POST /api/v1/auth/validate` - 验证令牌
|
||||
|
||||
## 跨域问题解决
|
||||
|
||||
### 开发环境
|
||||
✅ 使用 Vite 代理转发，不会有跨域问题
|
||||
|
||||
### 生产环境
|
||||
生产环境需要在后端配置 CORS，或者使用 Nginx 反向代理：
|
||||
|
||||
**Nginx 配置示例：**
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name your-domain.com;
|
||||
|
||||
# 前端静态文件
|
||||
location / {
|
||||
root /var/www/html;
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# API 代理
|
||||
location /api {
|
||||
proxy_pass http://localhost:8085;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 测试代理
|
||||
|
||||
### 1. 启动后端服务
|
||||
确保后端服务运行在 `localhost:8085`
|
||||
|
||||
### 2. 启动前端开发服务器
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
服务器现在运行在：http://localhost:3001
|
||||
|
||||
### 3. 测试登录功能
|
||||
访问：http://localhost:3001/#/user/login
|
||||
|
||||
尝试登录，查看网络请求：
|
||||
- 请求 URL 应该是：`http://localhost:3001/api/v1/auth/login`
|
||||
- Vite 会自动转发到：`http://localhost:8085/api/v1/auth/login`
|
||||
|
||||
### 4. 查看代理日志
|
||||
|
||||
在浏览器开发者工具的 Network 标签中，可以看到：
|
||||
- Request URL: `http://localhost:3001/api/v1/auth/login`
|
||||
- 如果代理成功，会收到来自 `localhost:8085` 的响应
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q1: 代理不生效？
|
||||
**A:**
|
||||
1. 确认修改配置后重启了开发服务器
|
||||
2. 检查请求 URL 是否以 `/api` 开头
|
||||
3. 查看控制台是否有错误信息
|
||||
|
||||
### Q2: 后端服务连接失败？
|
||||
**A:**
|
||||
1. 确认后端服务正在运行：`http://localhost:8085`
|
||||
2. 尝试直接访问后端 API 测试
|
||||
3. 检查防火墙设置
|
||||
|
||||
### Q3: 收到 CORS 错误？
|
||||
**A:**
|
||||
- 开发环境不应该有 CORS 问题，因为使用了代理
|
||||
- 如果仍有问题，检查 `changeOrigin: true` 是否设置
|
||||
|
||||
### Q4: 需要代理多个后端服务？
|
||||
**A:**
|
||||
```typescript
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8085',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/auth': {
|
||||
target: 'http://localhost:8086',
|
||||
changeOrigin: true,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 环境差异
|
||||
|
||||
| 环境 | API URL | 说明 |
|
||||
|------|---------|------|
|
||||
| 开发环境 | `/api` | 使用 Vite 代理转发到 localhost:8085 |
|
||||
| 生产环境 | `https://api.your-domain.com` | 直接请求生产环境 API |
|
||||
|
||||
## 下一步
|
||||
|
||||
1. ✅ 代理配置已完成
|
||||
2. ⏳ 启动后端服务（端口 8085）
|
||||
3. ⏳ 测试登录功能
|
||||
4. ⏳ 验证 API 调用是否正常
|
||||
|
||||
## 相关文件
|
||||
|
||||
- [vite.config.ts](../../vite.config.ts) - Vite 配置
|
||||
- [.env.dev](../../.env.dev) - 开发环境配置
|
||||
- [.env.prod](../../.env.prod) - 生产环境配置（待更新）
|
||||
- [src/plugins/axios.ts](../../src/plugins/axios.ts) - Axios 配置
|
||||
- [auth-api.md](../../auth-api.md) - 后端 API 文档
|
||||
Reference in New Issue
Block a user