動的役割ベースのルーティング（React-Router）

Question

私は電子商取引に関連する製品を構築しており、ユーザーは2種類あります（顧客&）。両方のタイプのユーザーには、それぞれ異なるホームページがあります。今は、顧客がログインしている場合は顧客のホームページに、または売り手のアカウントがログインしている場合は販売者のホームページに移動したいです。それ以外の場合は、ランディングページにルーティングする必要があります。 react-routerとthis boilerplateを使用してこの機能を実現するにはどうすればよいですか？

次のように私が何かをしようとした（しかし、それは動作しませんでした）：

{ 
     path: '/', 
     name: 'home', 
     getComponent(nextState, cb) { 
     let HomePagePath = 'containers/HomePage'; 
     if (customerLoggedIn) { 
      HomePagePath = 'containers/CustomerHomePage'; 
     } 
     const importModules = Promise.all([ 
      import(HomePagePath), 
     ]); 

     const renderRoute = loadModule(cb); 

     importModules.then(([component]) => { 
      renderRoute(component); 
     }); 

     importModules.catch(errorLoading); 
     }, 
    }, 

Answer 1

私が使用しているが同様の何かをするボイラープレートを反応します。ここでの要点は次のとおりです。

1. はroutes.js

   フォーカス取得時にonEnter関数を定義：redirectToLogin、 パス： '/アカウント'、 名： 'アカウント'、 getComponent（nextState、CBを）{...

2. routes.js

   輸出のデフォルトの関数createRoutes（店舗）でのインポート機能{// getHooksファクトリを使用して再利用可能な非同期インジェクタを作成します。 const {injectSagas、redirectToLogin、redirectToDashboard} = getHooks（store）;

3. リダイレクト機能をapp/utils/hooks.jsに作成します。これは、ユーザーの役割に基づいてリダイレクトする場所です。

   エクスポート関数redirectToLogin（ストア）{ //リダイレクトを有効にするためにパス名を設定します。 setPath（）; リターン（nextState、交換）=> { 場合（利用者（店舗）！）{ を置き換える（{ パス名： '/'、 状態：{nextPathname：nextState.location.pathname} }）。 }他{ 場合（利用者（店舗）.account_statusは=== '閉じ'）{ 置き換える（{ パス名： '/ closedaccount' 状態：{nextPathname：nextState.location.pathname} }）。 } } }; injectAsyncReducer（店舗）、 injectSagas：injectAsyncSagas（店舗）、 redirectToLogin： }

4. エクスポートがapp/utils/hooks.js

   エクスポート関数getHooks（ストア）{ リターン{ injectReducerから機能をリダイレクトredirectToLogin（店舗）

Answer 2

私がここに書いている記事のhereを見つけました。 あなたはそう

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

//BOD routes 
<Route authorisedUsers={['KR']} path="/home" component={HomeContainer} /> 

//HR routes 
<Route authorisedUsers={['HR']} path="/hrhome" component={HRDashboardContainer} /> 

//common routes  
<Route authorisedUsers={['KR', 'HR']} path="/notes" component={NotesContainer} /> 

ようにあなたのコンポーネントに小道具を追加し、これは、本質的に追加されます

Role based routing react redux 
componentDidUpdate() { 
    const { 
     children, //Component to be rendered (HomeContainer if route = '/home') 
     pathname: {location}, //location.pathname gives us the current url user is trying to hit. (with react router) 
     profileId, //profileId required by profile page common to all user journeys. 
     role } = this.props; 
    this.reRoute(role, this.props.children, location.pathname, ProfileId) 
} 

decideRoute(role, ProfileId) { //decide routes based on role 
    if(role==='HR') 
    return 'hrhome'; 
    else if(role==='KR') 
    return 'home'; 
    else if(role==='USER'&&ProfileId) 
    return 'profile/'+ProfileId; 
    else 
    return '/error'; 
} 

isAuthorised(authorisedUsers, role) { 
    return _.includes(authorisedUsers, role) 
} 

reRoute(role, children, path, ProfileId) { 
    if(role===null && path!=='/') // user hit a different path without being authenticated first 
    { 
    hashHistory.replace('/'); //this is where we implemented login 
    return; 
    } 
    let route = this.decideRoute(role, ProfileId) //if role has already been fetched from the backend, use it to decide the landing page for each role. 
    if(children) // if we already are on one of the user journey screens ... 
    { 
    const authorisedUsers = children.props.route.authorisedUsers 
    if(!this.isAuthorised(authorisedUsers,role)) //... and the user is not allowed to view this page... 
    hashHistory.replace(`/${route}/`); //... redirect him to the home page corresponding to his role. 
    } 
    else 
    hashHistory.replace(`/${route}/`); // if the user has just logged in(still on/page or login page), and we know his role, redirect him to his home page. 
}//if none of these holds true, user is allowed to go ahead and view the page 

パス=「/」にレンダリングするコンポーネントに次のコードを追加することができますすべてのコンテナで動作し、役割に基づいて指示するゲートウェイチェック。また、あなたは何とか間違ったURLにヒットした場合、アクセスを許可しません。