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-kit thay 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.