moodist/test-jwt.js
zl 010fb9674b feat: 重构音乐列表UI与JWT认证完整实现 v2.7.0
## 🎯 核心功能重构

### 音乐列表显示优化
- **自动展示**: 登录用户页面打开时自动显示音乐列表,无需手动展开
- **权限控制**: 未登录用户完全隐藏"我的音乐"部分
- **独立展开**: 每个音乐项配备独立的展开/收起按钮
- **渐进展示**: 点击展开按钮显示音乐收录的声音详情

### JWT认证系统完整实现
- **安全升级**: 完全替代密码传输,实现JWT令牌认证
- **自动管理**: 登录时自动生成和存储JWT令牌
- **API集成**: 所有音乐相关API统一使用JWT认证
- **容错机制**: 多层级token获取策略确保认证稳定性

## 🔧 技术架构升级

### 新增核心模块
- `src/lib/jwt.ts` - JWT令牌创建与验证核心
- `src/lib/jwt-auth-middleware.ts` - JWT认证中间件
- `src/lib/api-client.ts` - 自动JWT令牌注入的API客户端
- `src/hooks/useNotification.ts` - 统一通知系统

### 组件化重构
- `src/components/buttons/save-music/` - 音乐保存按钮组件
- `src/components/buttons/delete-music/` - 音乐删除按钮组件
- `src/components/notification/` - 通知组件系统

### API安全强化
- 所有认证相关API集成JWT中间件
- 用户注册/登录自动返回JWT令牌
- 音乐CRUD操作统一JWT认证验证

## 🎨 用户体验优化

### 交互流程简化
- 登录即见:音乐列表自动展示,减少用户操作步骤
- 按需展开:声音详情按需显示,避免信息过载
- 状态持久:JWT令牌自动管理,无需重复登录

### 视觉层次优化
- 音乐名称与展开按钮并排布局,提升操作便利性
- 声音列表折叠显示,保持界面整洁
- 统一通知样式,确保视觉一致性

## 🛡️ 安全性提升

- **零密码传输**: API请求完全移除明文密码传输
- **令牌过期**: JWT令牌7天自动过期机制
- **状态隔离**: 认证状态与业务状态完全分离

版本: v2.7.0
技术栈: React + TypeScript + Astro + SQLite + JWT
2025-11-17 23:04:58 +08:00

71 lines
No EOL
1.9 KiB
JavaScript

import crypto from 'crypto';
// JWT配置 (与src/lib/jwt.ts保持一致)
const JWT_SECRET = 'your-secret-key-change-in-production';
const JWT_ALGORITHM = 'HS256';
const JWT_EXPIRES_IN = 7 * 24 * 60 * 60; // 7天
function base64UrlEncode(data) {
return Buffer.from(data)
.toString('base64')
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=/g, '');
}
function createJWT(payload) {
const header = { alg: JWT_ALGORITHM, typ: 'JWT' };
const now = Math.floor(Date.now() / 1000);
const jwtPayload = { ...payload, iat: now, exp: now + JWT_EXPIRES_IN };
const encodedHeader = base64UrlEncode(JSON.stringify(header));
const encodedPayload = base64UrlEncode(JSON.stringify(jwtPayload));
const signatureInput = `${encodedHeader}.${encodedPayload}`;
const signature = crypto
.createHmac('sha256', JWT_SECRET)
.update(signatureInput)
.digest('base64url');
return `${signatureInput}.${signature}`;
}
// 创建测试用的JWT token (用户ID: 1, username: test123)
const testToken = createJWT({
userId: 1,
username: 'test123'
});
console.log('测试JWT Token:', testToken);
// 测试API调用
async function testMusicAPI() {
try {
const response = await fetch('http://localhost:4323/api/auth/music/list', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${testToken}`
},
body: JSON.stringify({})
});
console.log('API响应状态:', response.status);
console.log('API响应头:', Object.fromEntries(response.headers.entries()));
const text = await response.text();
console.log('API响应内容:', text);
try {
const data = JSON.parse(text);
console.log('解析后的数据:', data);
} catch (e) {
console.log('响应不是有效的JSON');
}
} catch (error) {
console.error('API调用失败:', error);
}
}
testMusicAPI();