CODEWITHSUNDEEP
reactjspermissionsclient-side
user5670895
user5670895

Reputation: 1573

Implement client-side ReactJS permissions or break apps up into multiple files?

TL;DR: Restrict access via client-side permissions, or break apps up into separate files and restrict access to each file?

I am using ReactJS (with React Router, etc.) to create many small client-side applications. They will be used by workers in the field without switching much between them.

I am using Symfony2 as a back-end. I have permissions already set up here for server-rendered apps/pages.

So far all my users (of React apps) have required the same permissions, so I've gotten away with just restricting access to the page that serves the main app.js file (and the API too, of course). But now I need to be able to hide some of these apps from certain users. I have two choices, as I see it:

  1. implement a client-side permissions system that complements the Symfony2 server-side approach
  2. split my React apps up into separate bundled files and only serve the appropriate pages to the correct permissions-holders

Option 1 would add a lot of complexity to the project, and I have no idea how I would even begin, as there's not much out there in the way of tutorials. (By the way, though unlikely, it doesn't matter if users inspect the client-side code and break into the protected areas, because the underlying data is protected via the API.) But it would mean a single code-base and better caching, since all the vendor code such as React itself would only be downloaded once.

Option 2 would mean I could avoid having to create a client-side permissions system altogether, it would make each app simpler, and neatly fit into my existing server-side permissions system. However, it would be much less flexible and would mean serving the same vendor code multiple times due to many files.

Which approach should I take?

Upvotes: 0

Views: 911

Answers (1)

yachaka
yachaka

Reputation: 5579

Regarding your comments, a simple solution to decide to show/not show a component based on his permission level is to create a wrapping component.

...

let DumbPermissionLevel = ({userLevel, levelRequired, children}) => {
    if (userLevel < levelRequired)
        return null;
    return children;
};

let PermissionLevel = connect(
    (state) => ({
        userLevel: state.user.permissionLevel // Wherever your user permission level is stocked in your state
    })
)(DumbPermissionLevel);

...

You can then simply use it like this :

const LARVA = 0;
const MODERATOR = 1;
const ADMIN = 2;
...
<p>Everybody will see this.</p>

<PermissionLevel levelRequired={MODERATOR}>
    <p>Only moderators and admin will see this !</p>
</PermissionLevel>

<PermissionLevel levelRequired={ADMIN}>
    <p>Only admins will see this !</p>
</PermissionLevel>

Of course, this implies that you transmit your user permission-level from your backend server to your client code.
Have a look a the createStore() second argument for this.

Upvotes: 1

Related Questions