Access Control List

Hello everyone!
I've an question while doing the authorization. I have receive the role & permission like this from database.I have handle the permission for each component like this:

permission.device.create.own && <CreateComponent />

And this is what I receive from database:

I want to ask is there another way to handle it faster, because there was more than 50 UI Component in my project.
Thank for all your help!

Comments

[Daniel Brady]

Hi!

An alternate pattern you can use is to move the conditional rendering into the components themselves.

For example, instead of:

// App.jsx
function App({ props }) {
  var { permission } = props;
  return (
    {{ permission.device.create.own && <CreateComponent /> }}
  );
}

You could move the condition into CreateComponent, and let it decide whether or not it should render:

// App.jsx
function App({ props }) {
  var { permission } = props;
  return <CreateComponent permission={permission} />;
}

// CreateComponent.jsx
function CreateComponent({ props }) {
  var { permission: { device: { create: own } } } = props;

  // Render only if permission is given
  return (
    {{ own && <div /> }}
  );
}

It makes your parent component (App, in my example) cleaner and easier to read, and delegates permission handling to each child component.

But even if there are other methods, I think you have to make a choice: should the parent component own the permission logic, or should each component know how to handle permissions?

[hvu160699]

Thank you for your feedback! I'm applying your way. I was handle permission logic ( own, any ) for parent component, and fields for child component ( Fields which can read, create, update base on the field's name )