authentication - setting permissions on redux actions -

i creating web redux-react app have number of different permission levels. many users may interacting 1 one piece of data may have limitations on can do.

to me, obvious way set permissions on interactions on data (held behind app server) associate permissions different redux actions. then, when user saves state client side app bundle users action history , send server. these actions applied data in server , permissions checked, action action, against user jwt.

this mean lots our reducer code used isomorphically on server.

i cannot find resources/disscussions on this. normal way of handling complex permissions in redux app? having auth purely @ endpoint seems cumbersome , require rewriting ton of new code written in client side reducers. reason not go ahead , create reducer checks auth on each action?

points:

• must assume actions sent server authenticated, sent users not have permission dispatch these actions
• if permissions have been checked , inside actions reducer can check permissions , pure

i think it's not responsibility of action creators check permissions using reducer , selector definitively way go. here 1 possible implementation.

the following component requires acl checks:

/**  * display user record.  *   * deletion link added if logged user has sufficient permissions  * delete record.  */ function userrecord({ username, email, avatar, isgranted, deleteuser }) {   return (     <div>       <img src={avatar} />       <b>{username}</b>       {isgranted("delete_user")         ? <button onclick={deleteuser}>{"delete"}</button>         : null       }     </div>   ) } 

we need connect our store hydrate props:

export default connect(   (state) => ({     isgranted: (perm) => state.loggeduser.permissions.has(perm),   }),   {deleteuser},   (stateprops, dispatchprops, ownprops) => ({     ...stateprops,     ...ownprops,     deleteuser: () => dispatchprops.deleteuser(ownprops.user)   }) )(userrecord) 

• the first argument of connect create isgranted logged user. part done using reselect improve performance.

• the second argument bind actions. nothing fancy here.

• the third argument merge props , pass them wrapped component. deleteuser bound current record.

you can use userrecord without dealing acl checks since auto-update depending on stored in loggeduser.

<userrecord user={someuser} /> 

in order above example work need store logged user in redux's store loggeduser. don't need check acl on actions since ui won't trigger them if current user lacks of permissions. moreover, acl have checked server-side.