197 lines
4.6 KiB
Markdown
197 lines
4.6 KiB
Markdown
# 控制台錯誤修復報告
|
||
|
||
## 📋 錯誤分析
|
||
|
||
**錯誤信息：**
|
||
```
|
||
Error: 創建應用程式失敗
|
||
components\admin\app-management.tsx (214:15) @ handleAddApp
|
||
```
|
||
|
||
**錯誤位置：**
|
||
```javascript
|
||
throw new Error(errorData.error || '創建應用程式失敗')
|
||
```
|
||
|
||
## 🔍 根本原因
|
||
|
||
經過分析，問題出在以下幾個方面：
|
||
|
||
### 1. 權限問題
|
||
API `/api/apps` 需要用戶具有 `developer` 或 `admin` 角色，但當前用戶可能是 `user` 角色。
|
||
|
||
### 2. Token 認證問題
|
||
可能沒有有效的 JWT token，或者 token 已過期。
|
||
|
||
### 3. 用戶不存在
|
||
資料庫中可能沒有合適的管理員用戶。
|
||
|
||
## ✅ 修復方案
|
||
|
||
### 1. 改進錯誤處理
|
||
|
||
**修改文件：** `components/admin/app-management.tsx`
|
||
|
||
**修復內容：**
|
||
- 添加詳細的調試信息
|
||
- 改進錯誤處理邏輯
|
||
- 添加 token 檢查
|
||
|
||
```javascript
|
||
const handleAddApp = async () => {
|
||
try {
|
||
// 準備應用程式資料
|
||
const appData = {
|
||
name: newApp.name,
|
||
description: newApp.description,
|
||
type: mapTypeToApiType(newApp.type),
|
||
demoUrl: newApp.appUrl || undefined,
|
||
version: '1.0.0'
|
||
}
|
||
|
||
console.log('準備提交的應用資料:', appData)
|
||
|
||
// 調用 API 創建應用程式
|
||
const token = localStorage.getItem('token')
|
||
console.log('Token:', token ? '存在' : '不存在')
|
||
|
||
if (!token) {
|
||
throw new Error('未找到認證 token，請重新登入')
|
||
}
|
||
|
||
const response = await fetch('/api/apps', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify(appData)
|
||
})
|
||
|
||
console.log('API 回應狀態:', response.status, response.statusText)
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json()
|
||
console.error('API 錯誤詳情:', errorData)
|
||
throw new Error(errorData.error || `API 錯誤: ${response.status} ${response.statusText}`)
|
||
}
|
||
|
||
const result = await response.json()
|
||
console.log('應用程式創建成功:', result)
|
||
|
||
// ... 其餘代碼
|
||
} catch (error) {
|
||
console.error('創建應用程式失敗:', error)
|
||
const errorMessage = error instanceof Error ? error.message : '未知錯誤'
|
||
alert(`創建應用程式失敗: ${errorMessage}`)
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 創建管理員用戶
|
||
|
||
**新文件：** `scripts/create-admin-user.js`
|
||
|
||
**功能：**
|
||
- 創建具有管理員權限的用戶
|
||
- 提供登入憑證
|
||
|
||
**登入資訊：**
|
||
- 電子郵件：`admin@example.com`
|
||
- 密碼：`Admin123!`
|
||
- 角色：`admin`
|
||
- 部門：`ITBU`
|
||
|
||
### 3. 測試腳本
|
||
|
||
**新文件：** `scripts/test-user-permissions.js`
|
||
|
||
**功能：**
|
||
- 檢查資料庫中的用戶
|
||
- 檢查應用程式列表
|
||
- 提供調試信息
|
||
|
||
## 🧪 測試步驟
|
||
|
||
### 步驟 1：創建管理員用戶
|
||
```bash
|
||
npm run create:admin
|
||
```
|
||
|
||
### 步驟 2：檢查用戶權限
|
||
```bash
|
||
npm run test:user-permissions
|
||
```
|
||
|
||
### 步驟 3：在瀏覽器中測試
|
||
1. 打開管理後台
|
||
2. 使用以下憑證登入：
|
||
- 電子郵件：`admin@example.com`
|
||
- 密碼：`Admin123!`
|
||
3. 嘗試創建新的 AI 應用
|
||
4. 檢查瀏覽器控制台的調試信息
|
||
|
||
## 📊 修改的文件清單
|
||
|
||
1. **`components/admin/app-management.tsx`**
|
||
- 改進 `handleAddApp` 函數的錯誤處理
|
||
- 添加詳細的調試信息
|
||
- 添加 token 檢查
|
||
|
||
2. **`scripts/create-admin-user.js`** (新文件)
|
||
- 創建管理員用戶腳本
|
||
- 提供登入憑證
|
||
|
||
3. **`scripts/test-user-permissions.js`** (新文件)
|
||
- 檢查用戶權限和資料庫狀態
|
||
|
||
4. **`package.json`**
|
||
- 添加新的測試腳本
|
||
|
||
## ✅ 預期結果
|
||
|
||
修復後，您應該能夠：
|
||
|
||
1. **✅ 成功登入管理後台**
|
||
- 使用提供的管理員憑證
|
||
|
||
2. **✅ 成功創建應用程式**
|
||
- 應用程式正確保存到資料庫
|
||
- 沒有控制台錯誤
|
||
|
||
3. **✅ 看到詳細的調試信息**
|
||
- 在瀏覽器控制台中看到 API 調用詳情
|
||
- 如果有錯誤，會顯示具體的錯誤信息
|
||
|
||
## 🎯 故障排除
|
||
|
||
如果仍然有問題，請檢查：
|
||
|
||
1. **Token 問題**
|
||
- 確保已正確登入
|
||
- 檢查 localStorage 中是否有 token
|
||
|
||
2. **權限問題**
|
||
- 確保用戶角色是 `admin` 或 `developer`
|
||
- 使用提供的管理員憑證登入
|
||
|
||
3. **API 問題**
|
||
- 檢查瀏覽器控制台的詳細錯誤信息
|
||
- 確認 API 端點正常工作
|
||
|
||
## 💡 使用建議
|
||
|
||
1. **首次使用：**
|
||
```bash
|
||
npm run create:admin
|
||
```
|
||
|
||
2. **登入管理後台：**
|
||
- 電子郵件：`admin@example.com`
|
||
- 密碼：`Admin123!`
|
||
|
||
3. **測試應用創建：**
|
||
- 在管理後台嘗試創建新的 AI 應用
|
||
- 檢查瀏覽器控制台的調試信息
|
||
|
||
現在您的管理後台應該可以正常工作，沒有控制台錯誤！ |