Bỏ qua nội dung
VNexus VNexus Requirement

Xem hồ sơ cá nhân trên web

Feature URL
Module
user
Status
in-development
Priority
P1
Platforms
fe · be
AC progress
7 / 10
Last reviewed
2026-05-29

Mục tiêu

Cho phép user đã đăng nhập xem hồ sơ cá nhân trên web và để header/menu tài khoản luôn hiển thị đúng tên, avatar mới nhất. Đây là flow nền cho các thao tác update profile, update avatar và quản lý tài khoản cá nhân.

Phạm vi

Trong phạm vi (In scope):

  • Hydrate auth state sau login/refresh để có userId, roles, accessToken.
  • Fetch full profile bằng GET /api/v1/users/me sau khi auth sẵn sàng.
  • Lưu profile vào Redux profile.current.
  • Header/menu tài khoản hiển thị fullName và avatarUrl.
  • Trang /customer/profile hiển thị profile cá nhân, loading/error state và action chuyển sang chỉnh sửa.

Ngoài phạm vi (Out of scope):

  • Form cập nhật profile, xem feature user-profile-update-web.
  • Cập nhật avatar, xem feature user-avatar-update-web.
  • Đổi mật khẩu hoặc reset password.
  • Public profile của user khác, xem feature user-public-profile-listings-web.

User Stories

  • Là user đã đăng nhập, tôi muốn xem hồ sơ của mình để kiểm tra thông tin tài khoản hiện tại.
  • Là user đang dùng web, tôi muốn menu tài khoản hiện đúng tên/avatar của mình để biết đang đăng nhập đúng account.
  • Là user có session refresh, tôi muốn reload trang vẫn thấy profile sau khi hệ thống hydrate auth.

Luồng chức năng

sequenceDiagram
    actor User
    participant Web
    participant Auth as Auth/BFF
    participant BE

    User->>Web: Mở web hoặc reload sau khi đã đăng nhập
    Web->>Auth: POST /api/auth/refresh
    Auth-->>Web: accessToken + userId + roles
    Web->>BE: GET /api/v1/users/me
    BE->>BE: Lấy user theo JWT principal
    BE-->>Web: UserProfileResponse
    Web->>Web: Lưu profile.current vào Redux
    Web->>User: Render menu tài khoản và /customer/profile

Acceptance Criteria

  • AC-1: Backend có GET /api/v1/users/me yêu cầu quyền user:read:self.
  • AC-2: API chỉ lấy user hiện tại từ JWT principal, không nhận userId từ client.
  • AC-3: Response gồm id, fullName, avatarUrl, email, phone, bio, province, ward, createdAt.
  • AC-4: Frontend có fetchMyProfileThunk gọi ROUTES_API_USER.ME.
  • AC-5: AuthEffects chỉ fetch profile khi isAuthenticated, userId và accessToken đã sẵn sàng.
  • AC-6: Redux profileSlice lưu data, isLoading, error và clear profile khi logout.
  • AC-7: UserProfileMenu dùng profile.fullName và profile.avatarUrl, fallback sang User {id} khi profile chưa có.
  • AC-8: Trang /customer/profile phải render profile thật thay vì chỉ hiển thị heading placeholder.
  • AC-9: Trang profile cần hiển thị loading, error retry và empty state rõ ràng.
  • AC-10: Type UserProfile phía FE cần đồng bộ với UserProfileResponse backend hoặc backend cần mở rộng response theo type FE hiện tại.

Quy tắc nghiệp vụ

  • /users/me là owner-only endpoint và luôn yêu cầu access token hợp lệ.
  • Profile đầy đủ chỉ trả cho chính user đó hoặc luồng admin riêng; không dùng response này cho public card.
  • Email và phone là private fields, chỉ xuất hiện trong full profile của chính user.
  • FE không gọi /users/me khi chưa có access token để tránh request 401 do race với bootstrap auth.
  • Sau logout, profile cache phải bị xoá để tránh rò dữ liệu giữa các account trên cùng browser.

Dữ liệu & Trạng thái

Entity nghiệp vụ:

  • User: nguồn dữ liệu profile cá nhân.
  • UserProfileResponse: contract full profile cho user hiện tại.
  • profile.current: Redux state chứa data, isLoading, error.
  • AuthUser: user tối giản trong auth state gồm id và roles.

Trạng thái user-facing:

  • unauthenticated — chưa có token, không fetch profile.
  • bootstrapping-auth — web đang refresh session.
  • profile-loading — đang gọi /users/me.
  • profile-ready — đã có profile để render.
  • profile-error — không tải được hồ sơ, user có thể retry hoặc đăng nhập lại.

Liên quan