API Integration (Axios)
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The API Integration layer serves as the communication bridge between the Vue.js frontend and the Spring Boot backend. It provides a centralized mechanism for executing asynchronous HTTP requests, handling authentication state via JWT, and managing global error states such as session expiration. While the project documentation references Axios configuration in its README.md, the actual implementation in the codebase utilizes a custom wrapper around the native fetch API to maintain consistent request headers and centralized endpoint management.
The primary goal of this module is to abstract the complexities of HTTP communication, allowing feature-specific scripts (like Kanban board management or task details) to interact with data through simple, named functions. Sources: README.md:214-239, src/main/resources/static/js/api.js:4-6
Architecture and Core Request Logic
The architecture centers around a "Service-Oriented" JavaScript module named API. It encapsulates a BASE URL path and a private request function that handles the lifecycle of an HTTP call.
The Request Lifecycle
The request function performs several critical steps:
- Header Injection: Automatically retrieves the JWT token from
localStorage(stored under the keydtm_token) and attaches it to theAuthorizationheader. - Request Execution: Uses the
fetchAPI to call endpoints prefixed with/api. - Auth Validation: Checks for
401 Unauthorizedresponses. If detected, it clears the local token and redirects the user to the/loginpage. - Error Handling: Parses non-OK responses and throws standardized errors based on the JSON body returned by the server.
This diagram illustrates the flow of a standard API request and its security/error check points.
Sources: src/main/resources/static/js/api.js:15-31
API Modules and Endpoints
The integration is divided into logical groups matching the application's functional blocks: Authentication, Projects, Tasks, Subtasks, Comments, Attachments, and Notifications.
Endpoints Summary Table
| Category | Method | Endpoint | Description |
|---|---|---|---|
| Auth | POST | /auth/login | Exchanges credentials for a JWT token. |
| Projects | GET | /projects | Retrieves list of projects accessible to the user. |
| Tasks | PATCH | /tasks/{id}/status | Updates task status (e.g., NEW to DONE). |
| Subtasks | GET | /tasks/{taskId}/subtasks | Lists all sub-items for a parent task. |
| Attachments | POST | /attachments/upload | Multipart upload for files (Task/Comment). |
| Notifs | PATCH | /notifications/read-all | Marks all user notifications as read. |
Sources: src/main/resources/static/js/api.js:35-86
File Upload Logic
File uploads utilize FormData to handle binary data. Unlike other requests, the uploadFile method does not use the common request wrapper because it must omit the Content-Type: application/json header to allow the browser to set the correct multipart boundary.
Sequence of a file upload operation triggered from the task detail view.
Sources: src/main/resources/static/js/api.js:72-81, src/main/resources/static/js/task-detail.js:121-127
Security Configuration
The API integration relies on server-side security rules defined in SecurityConfig.java. The system uses a dual-filter chain approach to distinguish between web pages and the REST API.
- Stateless API: The
/api/**matcher is configured to beSTATELESS, meaning it does not use sessions but requires the JWT token for every request via theJwtFilter. - Public Access: Endpoints like
/api/auth/**are explicitly permitted to allow registration and login before a token is issued.
Sources: src/main/java/com/example/demo/config/SecurityConfig.java:34-50
Implementation Examples
Updating Task Status
The integration is used dynamically within components like the Kanban board or Task Detail view to provide real-time updates.
// src/main/resources/static/js/task-detail.js:13-23
async function changeStatus(newStatus) {
try {
await API.updateStatus(taskId, newStatus);
const badge = document.querySelector('.status');
badge.className = 'status status-' + newStatus;
badge.textContent = newStatus;
} catch (e) {
alert('Ошибка: ' + e.message);
}
}
Example of using API.updateStatus to perform a PATCH request and update the UI. Sources: src/main/resources/static/js/task-detail.js:13-23
Handling Notifications
The notification system uses several endpoints to fetch unread counts and mark notifications as read, ensuring the UI remains synchronized with the server-side state. Sources: src/main/resources/static/js/projects.js:46-55
Conclusion
The API Integration module provides a robust, centralized framework for client-server communication. By wrapping the fetch API and integrating JWT management directly into the request pipeline, the project ensures that security is consistently applied while simplifying the development of interactive features like the Kanban board and task management tools. Sources: src/main/resources/static/js/api.js:4-13, README.md:214-239