KIẾN TRÚC HỆ THỐNG: ADMIN FRONTEND (SYSTEM ARCHITECTURE)

Dự án Admin Frontend của hệ thống Check Domain được thiết kế theo mô hình ứng dụng trang đơn Single Page Application (SPA). Hệ thống áp dụng bộ tiêu chuẩn Enterprise Pattern hiện đại nhất của hệ sinh thái Vue, đảm bảo hiệu suất cao, khả năng mở rộng tốt và trải nghiệm người dùng (UX) mượt mà.

1. Công Nghệ Cốt Lõi (Core Tech Stack)

Hệ thống được xây dựng trên nền tảng các công nghệ tiên tiến nhất:

Framework chính: Vue 3 – Áp dụng hoàn toàn kiến trúc Composition API và cú pháp <script setup> giúp code gọn gàng, tái sử dụng logic (Composables) dễ dàng.

Build Tool: Vite 5.x – Trình đóng gói thế hệ mới thay thế Webpack, cung cấp tốc độ khởi động server tức thì và HMR (Hot Module Replacement) siêu tốc trong quá trình phát triển.

Ngôn ngữ: TypeScript (~5.5.2) – Bắt buộc ép kiểu chặt chẽ cho toàn bộ quy trình luân chuyển dữ liệu, Request/Response API, giúp phát hiện lỗi ngay từ lúc viết code (Compile-time).

UI Framework & Styling: * Naive UI: Cung cấp các Component lõi phức tạp (Table, Modal, Form...).

Tailwind CSS 3.4 & Sass: Hệ thống Utility-first CSS giúp linh hoạt tuỳ biến layout, thiết kế đáp ứng (Responsive) nhanh chóng.

Data Visualization: Tích hợp Chart.js và thư viện bọc vue-chartjs để trực quan hóa dữ liệu thống kê trên Dashboard.

2. Quản Lý Trạng Thái Toàn Cục (Global State Management)

Thay vì sử dụng Vuex (đã cũ), dự án áp dụng Pinia làm trung tâm quản lý trạng thái (State Management) với các ưu điểm vượt trội:

Cấu trúc nhẹ & Hỗ trợ TS tốt hơn: Pinia loại bỏ mutations, chỉ giữ lại state, getters, và actions, giúp luồng dữ liệu đơn giản hơn.

Lưu trữ bền vững (Persisted State): Tích hợp module pinia-plugin-persistedstate. Công cụ này tự động hóa việc đồng bộ các trạng thái quan trọng (như accessToken, user profile, theme mode) xuống localStorage của trình duyệt. Nhờ đó, người dùng không bị mất phiên đăng nhập khi tải lại trang (F5).

3. Tầng Giao Tiếp Mạng (Network & API Layer)

Toàn bộ HTTP Request giao tiếp với Server Backend được quản lý tập trung qua một Singleton Axios Class (tại src/configs/axios.ts). Đây là tầng kiến trúc thông minh nhất của dự án với cơ chế Interceptor mạnh mẽ:

A. Request Interceptor (Xử lý trước khi gửi)

Tự động gắn định danh: Tự động đính kèm header Authorization: Bearer <TOKEN> (lấy từ Pinia AuthStore) vào mọi request.

White-list: Bỏ qua quy tắc kiểm duyệt token đối với các API định danh cơ bản như /auth/login, /auth/refresh.

B. Cơ Chế Token Refresh Queueing (Nổi bật

Đây là giải pháp nâng cao giúp trải nghiệm người dùng (UX) không bao giờ bị gián đoạn (Silent Refresh):

Khi Axios phát hiện token sắp hết hạn (hoặc nhận lỗi Exired từ API), nó lập tức tạm treo (Queue) tất cả các request mới mà người dùng vừa thao tác.

Hệ thống âm thầm gọi một API chạy ngầm (/auth/refresh) để xin cấp lại Token mới từ Backend.

Khi nhận được Token mới, Axios cập nhật lại Header và giải phóng (Resolve) toàn bộ hàng đợi Request đang bị treo.
👉 Kết quả: Người dùng vẫn thao tác bình thường mà không hề nhận ra token vừa được làm mới, hoàn toàn không bị văng ra màn hình đăng nhập.

C. Response Interceptor (Xử lý khi nhận kết quả)

Tự động phân tích mã lỗi HTTP trả về.

Nếu API quăng lỗi 401 Unauthorized mức độ sâu (lỗi không thể refresh hoặc tài khoản bị khóa), hệ thống sẽ ngay lập tức kích hoạt authStore.logout() để dọn dẹp bộ nhớ và điều hướng người dùng trở ra màn hình đăng nhập.

4. Tối Ưu Hóa Trình Biên Dịch (Auto-Import Optimization)

Để giữ cho mã nguồn (Codebase) luôn sạch sẽ và giảm thiểu thao tác lặp lại cho Developer, kiến trúc Vite được tích hợp các Plugin đặc quyền:

unplugin-auto-import: Tự động chèn (inject) các method phổ biến của Vue (ref, reactive, computed, onMounted,...) vào môi trường toàn cục.

unplugin-vue-components: Tự động nhận diện và đăng ký các UI Component (của Naive UI hoặc Custom Component).

👉 Nhờ kiến trúc này, Developer có thể gọi trực tiếp các hàm và Component vào file .vue để sử dụng ngay mà không cần phải viết những dòng import ... from ... dài dòng ở đầu mỗi file.

System Architecture

KIẾN TRÚC HỆ THỐNG: ADMIN FRONTEND (SYSTEM ARCHITECTURE)#

1. Công Nghệ Cốt Lõi (Core Tech Stack)#

2. Quản Lý Trạng Thái Toàn Cục (Global State Management)#

3. Tầng Giao Tiếp Mạng (Network & API Layer)#

A. Request Interceptor (Xử lý trước khi gửi)#

B. Cơ Chế Token Refresh Queueing (Nổi bật#

C. Response Interceptor (Xử lý khi nhận kết quả)#

4. Tối Ưu Hóa Trình Biên Dịch (Auto-Import Optimization)#