# NJUTIC-Fronted

**Repository Path**: Asim0v/NJUTIC-Fronted

## Basic Information

- **Project Name**: NJUTIC-Fronted
- **Description**: NJUTIC-Fronted
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-01
- **Last Updated**: 2025-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# NJUTIC Frontend

基于 Vue 3 + TDesign Vue Next 的前端项目，提供用户登录认证功能。

## 功能特性

### 🔐 安全认证
- **密码加密传输**：使用 AES 加密算法对密码进行客户端加密
- **请求签名验证**：使用 HMAC-SHA256 对请求进行签名，防止数据篡改
- **JWT Token 认证**：支持基于 JWT 的用户身份验证
- **Token 自动管理**：自动处理 token 过期、刷新等逻辑

### 🎨 界面设计
- **现代化UI**：基于 TDesign Vue Next 组件库
- **响应式设计**：支持桌面端和移动端适配
- **优雅交互**：流畅的登录体验和错误提示

### 🛠️ 技术栈
- **Vue 3**：采用 Composition API
- **TDesign Vue Next**：腾讯开源的 Vue 3 组件库
- **Vite**：快速的构建工具
- **Crypto-js**：加密算法库
- **Axios**：HTTP 请求库

## 项目结构

```
src/
├── components/          # 组件目录
│   └── LoginPage.vue   # 登录页面组件
├── utils/              # 工具类目录
│   ├── api.js         # API 请求封装
│   └── crypto.js      # 加密工具类
├── assets/             # 静态资源
├── App.vue            # 根组件
└── main.js            # 入口文件
```

## 快速开始

### 环境要求
- Node.js >= 20.19.0
- npm >= 10.0.0

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产构建
```bash
npm run preview
```

## 登录功能

### 测试账号
- **用户名**：admin
- **密码**：admin123

### 安全特性

1. **密码加密**
   - 客户端使用 AES 算法加密密码
   - 加密密钥：`njutic-frontend-2025`
   - 传输过程中密码不会明文暴露

2. **请求签名**
   - 使用 HMAC-SHA256 算法生成请求签名
   - 签名密钥：`njutic-request-sign`
   - 防止请求数据被篡改

3. **Token 管理**
   - 登录成功后自动保存 JWT token
   - 自动在请求头中添加 Authorization
   - 支持 token 过期检测和处理

### API 接口设计

登录接口示例：
```javascript
POST /api/auth/login
Content-Type: application/json

{
  "username": "admin",
  "password": "encrypted_password",
  "timestamp": 1709513600000,
  "signature": "request_signature"
}
```

响应示例：
```javascript
{
  "code": 200,
  "message": "登录成功",
  "data": {
    "token": "jwt_token_string",
    "user": {
      "username": "admin",
      "role": "admin"
    }
  }
}
```

## 后端集成指南

### Spring Boot 后端配置

1. **依赖配置**
```xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.1</version>
</dependency>
```

2. **密码解密**
```java
@Service
public class CryptoService {
    private static final String SECRET_KEY = "njutic-frontend-2025";
    
    public String decryptPassword(String encryptedPassword) {
        // 使用相同的密钥解密前端传来的密码
        // 具体实现根据所选的加密库而定
    }
}
```

3. **签名验证**
```java
@Component
public class SignatureValidator {
    private static final String SIGN_KEY = "njutic-request-sign";
    
    public boolean verifySignature(String data, long timestamp, String signature) {
        // 验证请求签名
        String expectedSignature = generateSignature(data, timestamp);
        return signature.equals(expectedSignature);
    }
}
```

### 数据库设计

用户表示例：
```sql
CREATE TABLE users (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,  -- 存储加密后的密码
    email VARCHAR(100),
    role VARCHAR(20) DEFAULT 'user',
    status TINYINT DEFAULT 1,        -- 1: 启用, 0: 禁用
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
```

## 安全建议

1. **生产环境配置**
   - 修改默认的加密密钥
   - 使用环境变量管理敏感配置
   - 启用 HTTPS 传输

2. **密码策略**
   - 实施强密码策略
   - 定期要求用户更换密码
   - 限制登录失败次数

3. **Token 安全**
   - 设置合理的 token 过期时间
   - 实现 token 刷新机制
   - 支持用户主动登出

## 开发计划

- [ ] 添加用户注册功能
- [ ] 实现忘记密码功能
- [ ] 集成多因素认证（2FA）
- [ ] 添加用户管理界面
- [ ] 实现角色权限控制
- [ ] 添加操作日志记录

## 贡献指南

1. Fork 项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。