Dự án mô tả cách phân quyền người dùng được thực hiện ở Frontend
Các tài liệu liên quan sẽ được lưu ở Document trên Gdrive
Setup dev environment
npm install
npm run dev
Dự án sử dụng React 18, react-router-dom và 1 số thư hiện hỗ trợ UI để thực hiện phân quyền
Mockup data user:
{
"id": 7,
"username": "manager",
"fullname": "Nguyen Van A",
"email": "[email protected]",
"phone": "096123123",
"position": "manager",
"warehouse": "GHTK building",
}B1: Người dùng bắt đầu login từ đó lấy ra được các thông tin của họ và lưu vào Context API hoặc redux tùy ứng dụng
B2: Khi vào các route có yêu cầu phân quyền sẽ dẫn đến 1 Component WithAuthorize với các component name tương ứng, các routes sẽ được quản lý ở routes
B3: Trong WithAuhorize sẽ lấy ra được các Component, allowPosition, ... từ component name (ListPage), từ đó kết hợp với userInfo để thực hiện phân quyền
B4: Có 3 trường hợp xảy ra ở WithAuthorize
- Người dùng có quyền vào component => truyền thêm props isAllowed để xác định các permission cụ thể của họ ở trong component (View, Edit, Create, Delete, ...) từ đó render ra các thành phần tương ứng
VD:
{
isAllowed("edit") && <a onClick={() => edit(record)}>Edit</a>;
}- Người dùng không có quyền vào component => Trả về Unauthorize page
- Người dùng chưa Authenticate => Redirect về page login:
<Navigate to="/login" state={{ path: location.pathname }} replace />quannt86