Building a restful web application using react and having multiple roles

Question

I'm creating a single page web application that needs to be 100% restful (first time doing this). So, I'm having trouble to decide how I'm going to render the UI for multiple roles using react.

There's going to be a regular user and an admin, after the login/authentication, the server is going to redirect to the main application page, and there is going to be a menu. The thing is, the admin menu should have an extra option, so I'm thinking on should I handle this.

Should I have two different files for the redirect (user.html / admin.html)? The downside would be that I will probably have a bit of duplicated code, because one of the bundles will have everything the other one has, plus an extra component.

Or maybe a component that defaults to none and then if it's an admin it shows itself? The downside would be that if the user has some JS knowledge he could search the code and see what an admin could do (of course there would be authentication in the server to prevent anything from actually happening).

I was also thinking in getting the menu list through a json, and when I click the extra option, it gets the script with the components that should appear, and then I somehow do a ReactDOM.render with the result (don't even know if that's possible, maybe I'm overthinking). Also I've heard about a React-Router but didn't found enough information, maybe that's what I need?

Any ideas/examples on how this is properly done would be really helpful. Thanks in advance.

Answer 1

Definitely don't duplicate your code. First I'd ask, is there really a problem knowing what an admin is capable of? I wouldn't personally worry about that.

React Router would be used for client side routing, and you definitely want client side routing if you're going for a proper React app. You only use the server for initial App route, and then API calls, essentially.

It is certainly possible to pass back arguments to feed into the button component. Your props could contain a 'buttonList' property that has all the arguments necessary to render the button... But that's only really feasible obfuscation if that button's operation is simple, and that's as far as the admin functionality goes. Writing a generic component that takes in specifics by arguments, which can certainly be passed in from the server, is definitely the React way to do this.

What exactly you need to hide from users and how important that is determines if that will truly be enough, however.