React-router and authorization

help
1

What is the proper way to handle authorization in a Meteor app that uses react-router?

Is there something equivalent to iron:router’s onBeforeAction hook?

I’m considering doing it on the component level, something like:

//MainLayout.jsx
<div>
  {(Meteor.userId()) ? {this.props.children} : <Login />}
</div>

Is this a good way to solve this problem?

2

I’m doing something like this:

const requireAuth = (nextState, replace) => {
  if (!Meteor.loggingIn() && !Meteor.userId()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname },
    });
  }
};

Meteor.startup( () => {
  render(
    <Router history={ browserHistory }>
      <Route path="/" component={ App }/>
        <Route name="login" path="login" component={ LoginPage } />
        <Route name="recover-password" path="recover-password" component={ RecoverPassword } />
        <Route name="invite-token" path="invite/:token" component={ Invite } />
        <Route name="routecompany" path=":companyname" component={AdminContainer} onEnter={ requireAuth }>
          <Route name="catch-all" path="*" component={ RedirectCompanyContainer }/>
        </Route>
    </Router>,
    document.getElementById( 'react-router-app' )

But I also check for authentication and group access rights within the app components.

1 Like