Để phát triển một ứng dụng B2B phù hợp cho nhiều nhóm người dùng, tính năng đa người thuê (multi-tenancy) là yếu tố không thể thiếu. Bài viết này sẽ hướng dẫn bạn cách triển khai tính năng này trong môi trường React bằng cách kết hợp sức mạnh của Clerk, Lovable và Supabase mà không cần phải xử lý JWT parsing hay phạm vi người dùng một cách thủ công.
Mục lục
Tại Sao Cần Đa Người Thuê Cho Ứng Dụng B2B?
Khi xây dựng ứng dụng cho doanh nghiệp, bạn cần:
- Phân tách ngữ cảnh dữ liệu giữa các tổ chức
- Quản lý quyền hạn theo phạm vi
- Tạo trải nghiệm mượt mà khi chuyển đổi giữa nội dung cá nhân và của tổ chức
Cách Tích Hợp Clerk Organizations Cho Tính Năng Đa Người Thuê
Chúng tôi sẽ mở rộng một dự án hiện có bằng cách thêm hỗ trợ tổ chức từ Clerk. Bạn sẽ học cách:
1. Kích Hoạt Clerk Organizations
Truy cập Clerk Dashboard → Configure > Settings (phần Organization management) → Bật Organizations. Các thiết lập mặc định đã phù hợp cho hướng dẫn này.
2. Thêm OrganizationSwitcher Vào Dự Án
Sử dụng Lovable để thêm component OrganizationSwitcher vào thanh điều hướng. Sau khi hoàn thành, ứng dụng sẽ hiển thị “Personal account” – nơi người dùng có thể tạo tổ chức mới.
3. Cập Nhật Chính Sách RLS
Các chính sách RLS ban đầu được cấu hình để sử dụng ID người dùng. Chúng ta cần điều chỉnh để:
- Sử dụng ID tổ chức nếu có
- Quay về sử dụng ID người dùng nếu không
Kiểm Thử Tính Năng
Sau khi triển khai:
- Thêm quy tắc mới khi tổ chức đang hoạt động
- Chuyển về “Personal account” để xem các mục đã thêm trước đó
- Thử mời tài khoản khác và kiểm tra quyền truy cập
Lợi Ích Của Giải Pháp
Setup này mang lại:
- Bảo mật dữ liệu với RLS của Supabase
- Quản lý team đơn giản với Clerk
- Tốc độ phát triển nhanh nhờ Lovable
Chỉ với vài thay đổi, ứng dụng cá nhân của bạn đã sẵn sàng phục vụ nhiều tổ chức với trải nghiệm linh hoạt và bảo mật cao.
