Phân quyền React App với CASL

Tram Ho

Phân quyền React App với CASL

1. Giới thiệu

Một số Framework hỗ trợ:

2. Cấu hình cho Reactjs

Đọc thêm README.MD nếu chưa thoả mãn https://github.com/stalniy/casl/tree/master/packages/casl-react

Đây cũng có project mẫu cho react: https://github.com/stalniy/casl-react-example

a. Cài đặt packages

b. Code

Đầu tiên ta cần định nghĩa 2 files là file cấu hình ability.js và file component Can.js. Đặt files ở đâu thì tham khảo How to structure React project bởi anh Dan Abramov 😃.

Can.js

Đây là component để kiểm tra user hiện tại có quyền và hiển thị những thứ mình muốn ra hay không
Ví dụ:

ability.js

Trong này chúng ta cần input vào array rules mà user hiện tại có quyền gì cho ability.

c. Tích hợp vào project

Như cách giải thích các yêu cầu ở trên thì chúng ta có thể hardcode permissions cho từng role hoặc lấy từ server sau khi login

* Cách 1:

Định nghĩa một function và return và array rules

* Cách 2:

Có thể lấy data remote sau khi login và truyền vào ability

d. Cách dùng View More:

3. Credit:

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo