基於身份驗證的重定向與react-router

我是React的新手，在我的項目中我使用了react-router來定義路由。但是，我有相同的路徑根據條件重定向。我試着把條件運算符放在下面，但是辛苦工作，如果阻塞也是如此，那麼如何根據條件渲染具有相同路徑的不同組件。基於身份驗證的重定向與react-router

var Routes = (
 
    <Router history={hashHistory}> 
 
     {role === undefined ? (
 
      <Route path='/' component={Login} /> 
 
      ): 
 
      <Route path='/' component={Home}> 
 
       <Route path='category' component={About}/> 
 
       <Route path='input' component={Cate} /> 
 
       <Route path='charts' component={Chart}/> 
 
       <Route path='buyerHome' component={customer}/> 
 
      </Route> 
 
     } 
 
    </Router> 
 
);

來源

2016-07-09 Chaitu

可以使用反應路由器onEnter鉤來保護您的路線。

<Route path='/' component={Home} onEnter={requireAuth}> 

function requireAuth(nextState, replace) { 
    if (!role) { 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
}

希望這會有所幫助。

來源

2016-07-09 09:10:25 Ricky

爲重定向你可以使用onEnter

const checkRole = (nextState, replace)=>{ 
    if(role === undefined) replace('/login') 
}; 

<Route path='/' component={Home} onEnter={checkRole}> 
    <Route path='category' component={About}/> 
     ... 
</Route> 
<Route path='/login' component={Login} />

或者你可以使用HOC（高順序組件）如果你喜歡同檢查的作用和其他的東西

const CheckRole = Comp => class extends React.Component{ 
    componentWillMount(){ 
     if(role===undefined) hashHistory.replace('/signup'); 
    } 
    render(){ 
     return <Comp {...this.props}/>; 
    } 
}; 

<Route path='/' component={CheckRole(Home)}> 
    <Route path='category' component={About}/> 
    ... 
</Route> 
<Route path='/login' component={Login} />

不同組件的路徑，在某些條件基礎上

<Route path="/" component={role===undefined ? Login : Home} />

如果您使用redux，那麼您可以使用redux-auth-wrapper。並且它比onEnter方法有一些優點。

來源

2016-07-09 11:17:43

基於身份驗證的重定向與react-router

回答

相關問題