CODEWITHSUNDEEP
javascriptreactjs
Rubycut
Rubycut

Reputation: 1646

Reactjs website with admin parts

I am building website using react, and I have two classes of users, admins and normal users.

When I deploy react app, I am sending complete app into customer browser, and it in this way I am revealing admin parts of the website to everybody (who knows how to inspect javascript).

Is there is any way to prevent exposing admin parts of website to normal users?

I could ship problematic components using "Server side rendering" but then those components need to be also loaded to client in order to work in the browser, this is also called universal javascript, and they are visible to clients again.

Upvotes: 0

Views: 110

Answers (2)

Yan Derii
Yan Derii

Reputation: 34

Usually developers implement user roles access on the back-end, so there is no need for extra protection on the front-end. If you are also deeply interested in protecting user roles on the front-end, then you should think about developing two separate front-end applications for different user roles.

Upvotes: 0

deathangel908
deathangel908

Reputation: 9699

You want to build your frontend to be open for all users. For example if you want to serve resources via cdn in the future. The server side should take care of access violation. So your regular users wouldn't be able to access admin data (entities etc) via rest.

Well if you want to exclude admin static resources from serving to regular user just to reduce amount of traffic you can use ensure (this example is specific to webpack). I attached the example I used in my project below.

 require.ensure([], (require) => {
  /*  Webpack - use require callback to define
      dependencies for bundling   */
  const Provider = require('./view/ProviderView').default;
  const reducer = require('./modules/provider').default;

  /*  Add the reducer to the store on key 'provider'  */
  injectReducer(store, { key: 'provider', reducer });

  /*  Return getComponent   */
  cb(null, Provider);

/* Webpack named bundle   */
}, 'provider');

Upvotes: 2

Related Questions