基于动态角色的路由（React-Router）

我正在构建一个电子商务相关产品，并且有两种类型的用户（客户&卖家）。这两种类型的用户都有自己的主页（彼此完全不同）。现在，如果客户已登录，那么我想在客户主页上路由/如果卖家帐户已登录，则发送到卖家主页。否则，它应该路由到登录页面。如何使用react-router和this boilerplate来实现此功能？基于动态角色的路由（React-Router）

我尽力去做如下（但它没有工作）：

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

来源

2017-02-26 John Mcculley

我使用作出反应的样板做类似的事情。下面是它的要点：

定义一个onEnter功能routes.js

的OnEnter：redirectToLogin，路径： '/帐户'，名称： '账户'， getComponent（nextState，CB ）{...
导入功能routes.js

出口默认功能createRoutes（店）{// 使用getHooks工厂创建可重用的异步注入器 const {injectSagas，redirectToLogin，redirectToDashboard} = getHooks（store）;
在app/utils/hooks.js中创建您的重定向功能。这是你根据用户角色重定向的地方。

导出函数redirectToLogin（store）{设置路径名以启用重定向 setPath（）; 回报（nextState，替换）=> { 如果（用户（存储）！）{ 代替（{ 路径名： '/'，状态：{nextPathname：nextState.location.pathname} }）; }否则{如果（用户（存储）.account_status === '闭合'）{ 代替（{ 路径名： '/ closedaccount'，状态：{nextPathname：nextState.location.pathname} }）; } } }; injectAsyncReducer（店）， injectSagas：injectAsyncSagas（店）， redirectToLogin： }
出口从app/utils/hooks.js

导出功能getHooks（店）{ 回报{ injectReducer重定向功能redirectToLogin（店），

来源

2017-02-27 12:03:57 Kunal

但是在这种情况下，它将不会是相同的路线。让我再次向你解释：我有两个主页。一个是卖方，另一个是卖方。用户登录后，应该路由到相应的主页。但URL必须相同，即'/' 让我们以facebook为例。登录/主页对于登录和未登录帐户是不同的。 –

啊，如果你想要相同的网址，那么这个解决方案将无法完成，因为它只会重定向到例如/ customer或/ seller根据用户角色。 – Kunal

我找到一篇文章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

这实质上增加一个网关检查，可以在你的所有容器上工作，并根据你的角色指导你。此外，它不会让你访问，如果你不知何故击中了错误的网址。

来源

2017-04-24 17:54:38 Asheesh

基于动态角色的路由（React-Router）

回答

相关问题