リアクションの複数の役割のためのルートの認証

Question

私はリアクションルートを認証するためのチュートリアルに従っています。authenticatedがtrueの場合、ユーザーはルートにアクセスできるようになりました。

routes.js

import React from 'react'; 
import { Route, IndexRoute,Redirect } from 'react-router'; 

import App from './app'; 
import requireAuth from '../Authentication/require_authentication'; 

import Dashboard from '../Dashboard'; 
import Managers from '../Managers'; 
import Guests from '../Guests'; 
import Login from '../Login'; 

export default (
    <Route path="/" component={App}> 
    <IndexRoute component={requireAuth(Dashboard)} /> 
    <Route path="dashboard" component={requireAuth(Dashboard)} />  
    <Route path="advertisers" component={requireAuth(Managers)} /> 
    <Route path="properties" component={requireAuth(Guests)}/> 
    <Route path="login" component={Login} /> 

    </Route> 
); 

require_authentication.js

/*HIGHER ORDER COMPONENT */ 
import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

export default function(ComposedComponent) { 
    class Authentication extends Component { 
    static contextTypes = { 
     router: React.PropTypes.object 
    }  

    componentWillMount() { 
     if (!this.props.authenticated) { 
     this.context.router.push('/login'); 
     } 
    } 

    componentWillUpdate(nextProps) { 
     if (!nextProps.authenticated) { 
     this.context.router.push('/login'); 
     } 
    }   

    render() { 
     return <ComposedComponent {...this.props} /> 
    } 
    } 

    function mapStateToProps(state) { 
    return { authenticated: state.auth.authenticated }; 
    } 

    return connect(mapStateToProps)(Authentication); 
} 

彼らユーザーがログインがのlocalStorageでの状態としてこれを持っている：

userId: 1, 
userName:"Bob", 
roleName:"Manager" 

私はまだです作成されたコンポーネントはかなり新しくなっていますが、認証するだけでなく特定のルートにアクセスすることからの役割例えば。マネージャはマネージャルートとダッシュボードのみを表示できます。ゲストにはダッシュボードとゲストしか表示されません。

Answer 1

ユーザーの役割がレンダリングしようとしているルートを表示できるかどうかを確認する承認を確認した後、条件を追加するだけで済みます。そうでない場合、ユーザーを既定のルートにリダイレクトするか、エラーメッセージを表示します。 require_authentication.jsであなたの高次コンポーネントの概念に続き

は

、ここにあなたが欲しいものを行う必要があります修正版です：

const checkPermissions = (userRole, router) => { 
    if (userRole === "Manager") { 
    if (!(router.isActive('/dashboard') || 
      router.isActive('/manager'))) { 
     return false; 
    } 
    } 
    return true; 
}; 

export default function(ComposedComponent) { 
    class Authentication extends Component { 
    static contextTypes = { 
     router: React.PropTypes.object 
    }  

    componentWillMount() { 
     if (!this.props.authenticated) { 
     this.context.router.push('/login'); 
     } else if (!checkPermissions(this.props.user.role, this.context.router)) { 
     this.context.router.push('/'); 
     } 
    } 

    componentWillUpdate(nextProps) { 
     if (!nextProps.authenticated) { 
     this.context.router.push('/login'); 
     } else if (!checkPermissions(this.props.user.role, this.context.router)) { 
     this.context.router.push('/'); 
     } 
    }   

    render() { 
     return <ComposedComponent {...this.props} /> 
    } 
    } 

    function mapStateToProps(state) { 
    return { 
     authenticated: state.auth.authenticated, 
     user: state.auth.user 
    }; 
    } 

    return connect(mapStateToProps)(Authentication); 
} 

checkPermission機能の実装が異なると、複数の構成であってもよいし、1から例はそのアイデアを示すことです。

authオブジェクトの内部に、許可されたユーザーデータが存在することを前提としています。実際にユーザーのデータが格納されている場所によって変わる可能性があります。