The application has registered and unregistered users. Accordingly, for those and for others there will be different heders on the site (heders are in separate files and exported to the site pages). Using the onEnter hook in the reactor's root, I implement a method for checking the presence of a token in the current session with the user. If there is a token to be present, the user can go to certain root, if not, then using the replace redirect on the page with the login form. Everything works, but there is one snag - the header. You can implement a check in each component and, depending on it, send a guest, or custom header, but I do not think this is a good solution. I think the best way would be to check if the user is logged in or not and to throw one or another header into the page at the level of the router. Unfortunately, I did not find a suitable solution on the net. Please tell me how to do better in this situation?

Code of the router and onEnter (Now I have made 2 main pages and specified the necessary headers in them. Accordingly, if it turns out to throw the necessary header, there will be one main page):

 const App = React.createClass({ render: function() { return ( <div className="content"> <div className="app-container"> {this.props.children} </div> </div> ) } }); function authCheck(nextState,replace) { const token = window.localStorage.getItem(config.token); if (token != undefined) { } else { replace('/login'); } } render((<Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={MainPageGuest}/> <Route path="dash" component={MainPageUser} onEnter={authCheck}/> <Route path="user" component={UserPage} onEnter={authCheck}/> </Route> </Router> ), document.getElementById('application'));

    2 answers 2

    You can do so in order not to insert the code into each component:

     const App = React.createClass({ render: function() { return ( <div className="content"> <div className="app-container"> {'залогенен' ? <HeaderWithAuth /> : <HeaderNotAuth />} {this.props.children} </div> </div> ) } });

    Now the header will be next to the component.

    • everything worked well. thanks). But just curious, is there a way to transfer components along routes in the router? - Iga
    • As you assume, I think not (and why complicate things like that). There you can transfer only some values ​​via params - qpeela

    It is possible instead of component in the router to transfer the sv-in components , among which will be specified the header required for such routes. Such an approach will not only allow for authorization, but also, for example, roles. The check also remains in onEnter, only that what exactly is rendered is determined at the router level.

     <Route component={App}> <Route path="guest" components={{page: MainPageGuest, header: GuestHeader}}/> <Route path="users" components={{page: UserPage, header: UserHeader}}> <Route path="users/:id" component={Profile}/> </Route> <Route path="admin" components={{page: AdminPage, header: AdminHeader}}> <Route path="admins/panel" component={Panel}/> </Route> </Route> class App extends React.Component { render () { const { page, header } = this.props; return ( <div> <div className="header"> {header} </div> <div className="page"> {page} </div> </div> ) } }