Nhiệm vụ: Thêm giao diện quản trị người dùng và chuẩn bị quản lý mã thông báo JWT
Thêm giao diện quản trị người dùng và chuẩn bị quản lý mã thông báo JWT
Tạo giao diện quản trị người dùng và đặt nền tảng UI cho việc quản lý mã thông báo (token) JWT dùng để định danh người dùng trong tương lai.
Giao diện quản trị người dùng và quản lý token JWT
Bối cảnh
Mục tiêu tiếp theo quan trọng nhất là quản lý các token JWT được sử dụng để định danh người dùng nhận tin nhắn.
Các yêu cầu phía máy chủ (backend) để làm việc với người dùng đã tồn tại. Trong giai đoạn đầu, không làm lại phần backend của người dùng.
Giai đoạn đầu — Thực hiện ngay bây giờ
Xây dựng giao diện quản trị người dùng:
- danh sách người dùng;
- hành động "Thêm người dùng";
- khả năng mở thẻ (chi tiết) người dùng;
- chỉnh sửa người dùng;
- sử dụng các truy vấn và mutation GraphQL hiện có;
- thêm các thao tác GraphQL phía client và tạo lại các kiểu dữ liệu (types).
Bộ UI (UI-kit)
Đồng thời bắt đầu xây dựng ui-kit của riêng mình dựa trên React Aria đã được cài đặt:
- Sử dụng React Aria làm nền tảng headless;
- Mỗi thành phần UI cần thiết cho ứng dụng được đóng gói thành một component riêng biệt trong
ui-kit; - Thêm ngay Storybook story cho mỗi component mới;
- Trong các màn hình sản phẩm, sử dụng component từ
ui-kitthay vì dùng trực tiếp React Aria.
Giai đoạn tiếp theo — Token JWT
Sau giao diện quản trị người dùng, hãy thêm tính năng quản lý token JWT dùng để định danh người dùng nhận tin nhắn. Không trộn lẫn nhiệm vụ này với logic đăng nhập và phiên làm việc (session) hiện có.
Ghi chú kỹ thuật
- Hot reload đã hoạt động, không cần cấu hình lại.
- React Aria đã được cài đặt.
- CRUD backend cho người dùng đã có sẵn.
Tiêu chí hoàn thành giai đoạn đầu
Từ giao diện quản trị, quản trị viên có thể xem danh sách người dùng, thêm người dùng, mở thông tin người dùng hiện có và chỉnh sửa dữ liệu của họ. Các thao tác GraphQL phía client đã được thêm, các kiểu dữ liệu được tạo lại thành công, các phần tử UI được định dạng qua ui-kit và có các Storybook stories tương ứng.