User Permissions


(Alexander Whillas) #1

So I have just sorted authentication (with a Django backend) and want control the display of certain parts (or sub parts) of an app.

I was just going to load in a permissions list which i get from Django, which is just a list of strings, one for each permission, and store this with the users profile. Seems easy enough.

I guess then i would create a component that simply checks the given permissions list for one in particular and renders its children or not (or some alternative i.e. “You can’t handle the truth” etc)?

Has someone done anything like this? Is this a good strategy? Is there a major flaw in this thinking? Has someone done this before for Django and it will take me 5 minutes to setup an get on to the cool stuff…?

tanks!


(Alpha Dork) #2

I’ve passed the authentication level around using ‘context’ a letting that flow from a parent container down to the children. Works well - the auth level is pretty much a “context” —

Check out: https://facebook.github.io/react/docs/context.html


(Alexander Whillas) #3

I’m using Redux so its pretty easy to pass the permissions around. I was thinking something like this (just a sketch, not tested yet):

class Check extends React.Component {
  // Checks the given 'permission' (prop) against the current users permissions
  // list and renders the children only if the permission is present.

  getUserPermissions() {
    if (this.props.profileInfo !== null)
      return this.props.profileInfo.user.permissions;
    else
      return [];
  }

  hasPermission() {
    return this.getUserPermissions().indexOf(this.props.permission) !== -1
  }

  render() {
    if(hasPermission())
      return {this.props.children}
  }
}

export default connect(authSelector)(Check)

where authSelector would be something like permissions: store => store.profileInfo.permisisons an you would use it to just hide stuff from the current user like

<Check permission="canFlipTheBird">Would you like to flip the bird? <Button>Flip it!</Button></Check>

so if they didn’t have the canFlipTheBird permission in their permissions list then the text+link just would not appear.

Of course this would also be checked on the server when they actually submit any data as anything from the client end can’t be trusted.


(Alexander Whillas) #4

Actually, the answer I should have got was that this can’t work as the JSX compiler will traverse the tree since its in the source and pull some weird errors, the least of which will be permission errors if the component relies on server side stuff. The only way to stop rendering is via logic in the render() function.


(Evan Tedesco) #5

I am pretty sure you can use the pattern you described with Check as long as you define check outside of the scope in which it is used. Here is a library that does something similar: https://github.com/stalniy/casl-react-example


(Evan Tedesco) #6

Check this out: https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4