How can I add this on universal(isomorphic) react web apps?

[aseem2625]

I was trying to figure out a way but it doesn't seem to work for me if I try to put this on server side.

I am using this boilerplate. https://github.com/erikras/react-redux-universal-hot-example/

In server.js, I added

class Profile extends AuthorizedComponent {
  render() {
    return (
      <div className="profile-container">
        <RouteHandler {...this.props} />;
      </div>
    );
  }
}

And in same file, I replaced

        <Provider store={store} key="provider">
          <ReduxAsyncConnect {...renderProps} />
        </Provider>

          <Profile routes={getRoutes(store)}>
            <Provider store={store} key="provider">
              <ReduxAsyncConnect {...renderProps} />
            </Provider>
          </Profile>

For starting, I modified routes.js as

      <Route path="about" component={About} authorize={['admin']}/>
      <Route path="login" component={Login} authorize={['employee']}/>
      <Route path="survey" component={Survey} authorize={['employee', 'admin']}/>
      <Route path="widgets" component={Widgets}/>

and Rest I've made RoleAwareComponent.js and AuthorizedComponent.js and RouterHandler.js as mentioned in the article http://frontendinsights.com/role-based-authorization-using-react-router/

These things doesn't seem to work.

Can you please direct me if this is the correct way to add Role Based Authorization on server side? I can give further info if needed.

Thanks

[burczu]

Hi, thanks for raising this issue! To be honest I didn't try it in the isomorphic app yet... I will test it and fix the issue if needed.

[aseem2625]

Thanks @burczu I am eager to know its working with isomorphic react app.

On a side note: Also, I liked your article at http://frontendinsights.com/role-based-authorization-using-react-router/ Conceptually is good. As a feedback, I think it can be improved if the context of the project setup is given. For eg: We've several ways of setting up Routes.js and other things in React. 😃

[jaybe78]

Hi @burczu Have you managed to make it work on isomorphic app ?