React路由器授权

在元件安装之前进行授权检查的最佳做法是什么？

我使用react-router 1.x

这是我的路线

React.render(( <Router history={History.createHistory()}> <Route path="/" component={Dashboard}></Route> <Route path="/login" component={LoginForm}></Route> </Router> ), document.body); 

这是我的仪表板组件：

 var Dashboard = React.createClass({ componentWillMount: function () { // I want to check authorization here // If the user is not authorized they should be redirected to the login page. // What is the right way to perform this check? }, render: function () { return ( <h1>Welcome</h1> ); } }); 

Answer 1

React路由器v4的更新解决scheme

 <Route path="/some-path" render={() => !isAuthenticated ? <Login/> : <Redirect to="/some-path" /> }/> 

反应路由器到v3

使用'onEnter'事件并在callback中检查用户是否被授权：

 <Route path="/" component={App} onEnter={someAuthCheck}> const someAuthCheck = (nextState, transition) => { ... } 

Answer 2

通过react-router 4，你可以访问组件内部的Route道具 。 要redirect用户，您只需将新的URL推送到历史logging。 在你的例子中，代码是：

 var Dashboard = React.createClass({ componentWillMount: function () { const history = this.props.history; // you'll have this available // You have your user information, probably from the state // We let the user in only if the role is 'admin' if (user.role !== 'admin') { history.push('/'); // redirects the user to '/' } }, render: function () { return ( <h1>Welcome</h1> ); } }); 

在文档中，他们通过使用render属性而不是component 来显示另一种方法 。 他们定义了一个PrivateRoute ，当你定义所有的路由时，这使得代码非常明确。

Answer 3

如果你想在多个组件上应用授权，那么你可以这样做。

 <Route onEnter={requireAuth} component={Header}> <Route path='dashboard' component={Dashboard} /> <Route path='events' component={Events} /> </Route> 

对于单个组件你可以做

 <Route onEnter={requireAuth} component={Header}/> function requireAuth(nextState, replaceState) { if (token || or your any condition to pass login test) replaceState({ nextPathname: nextState.location.pathname }, '/login') }