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

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

npm install @casl/react @casl/ability

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

import { createCanBoundTo } from "@casl/react"
import ability from "./ability"

export default createCanBoundTo(ability)

Đâ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ụ:

import Can from './Can';

...

const Setting = ({ classes }) => (
<Buttons>
    <Can I="can" a="Shutdown">
      {() => <Button onClick={this.handleShutdown} />}
    </Can>
</Buttons>
);

ability.js

import { Ability } from "@casl/ability";
/**
 * Defines how to detect object's type: https://stalniy.github.io/casl/abilities/2017/07/20/define-abilities.html
 */
function subjectName(item) {
  if (!item || typeof item === "string") {
    return item;
  }

  return item.__type;
}

const ability = new Ability([], { subjectName });

export default ability;

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.

ability.update([{"actions":"can","subject":["Shutdown"]}])

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

function defineRulesFor(user) {
  const { role } = user;
  const { can, rules } = AbilityBuilder.extract();
  can("view", "Profile");
  switch (role) {
    case USER_ROLES.TECHNICIAN:
      break;
    case USER_ROLES.SALON_MANAGER:
      break;
    case USER_ROLES.SALON_OWNER:
      can("reschedule", "Booking");
      can("delete", "Booking");
      break;
    case USER_ROLES.SUPPLIER:
      break;

    default:

      break;
  }
  return rules;
}

* Cách 2:

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

import React, { Component } from 'react'
import ability from './ability'

export class LoginComponent extends Component {
  login(event) {
    event.preventDefault()
    const { email, password } = this.state

    return fetch('path/to/api/login', { method: 'POST', body: JSON.stringify({ email, password }) })
      .then(response => response.json())
      .then(session => ability.update(session.rules))
  }

  render() {
    return (
      <form onSubmit={this.login.bind(this)}>
        ...
      </form>
    )
  }
}

d. Cách dùng View More:

<Can I="create" a="Post">
  {() => <button onClick={...}>Create Post</button>}
</Can>

3. Credit:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

trungpv

7 bài viết.
2 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
4 0
Cài đặt môi trường cho laravel dùng docker 1. Cài đặt laravel composer createproject preferdist laravel/laravel blog 2. Tạo file dockercom...
trungpv viết gần 3 năm trước
4 0
White
3 0
(Link) 0. Tạo user trên Remote Server sudo adduser deployer sudo usermod aG wwwdata deployer sudo chfn o umask=022 deployer sudo chown deplo...
trungpv viết 10 tháng trước
3 0
White
2 2
Dismiss keyboard on React Native: Tắt keyboard khi chạm ra ngoài TextInput import React, { Component } from 'react'; import { TouchableWithoutFe...
trungpv viết gần 3 năm trước
2 2
Bài viết liên quan
White
13 2
(Link) (Link) &mdash; tracks device battery state. (Link) (Link) &mdash; tracks geo location state of user's device. (Link) (Link) &mdash; tr...
Đinh Viễn viết 5 tháng trước
13 2
White
1 6
Mục đích của cái log này là gì? ReactJS và React Native đang là những cái tên khá hot hiện nay, với phương châm "Learn once, write anywhere" , bộ ...
Trung Trần viết gần 4 năm trước
1 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
2 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!