リアクタ認可

Question

コンポーネントの取り付け前に認可チェックのベストプラクティスは何ですか？

私はここで反応し、ルータを1.1

を使用する私のルートはここ

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

ため

更新ソリューションは、ルータv4の に反応

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

はv3の

使用「フォーカス取得時」イベントまでのルータを反応させ、ユーザが許可されている場合、コールバックチェックで：反応-ルータ4で

<Route path="/" component={App} onEnter={someAuthCheck}> 

const someAuthCheck = (nextState, transition) => { ... } 

Answer 2

をあなたはRoute propsへのアクセス権を持っていますコンポーネントの内部にあります。ユーザーをリダイレクトするには、新しいURLを履歴にプッシュするだけです。あなたの例では、コードは次のようになります。

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> 
    ); 
    } 
}); 

ドキュメントでは、彼らが代わりにcomponentの、renderプロパティを使用して、another way to do itを示しました。それらは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') 
}