2017-10-06 43 views
0

我想在使用React Router v4时实现一些服务器端身份验证(通过xhr)。我不希望路由转换,直到我与我的服务器验证用户通过身份验证(通过拥有令牌)以及令牌存储在会话存储中(而不是需要异步)。React路由器v4等待xhr身份验证过渡到路由

目前的问题是,即使用户未通过身份验证,我的“私人”路线仍然尝试呈现。

我的阵营路由器的路线是这样的:

class AppContainer extends Component { 
    render() { 
    return (
     <div> 
     <main> 
      <Switch> 
      <Route exact path='/' component={Home} /> 
      <PrivateRoute path='/dashboard' component={Dashboard} /> 
      </Switch> 
     </main> 
     </div> 
    ); 
    } 
} 

PrivateRoute,按指定的样子:

const isAuthenticated = async() => { 
    const resp = await axios.get('http://localhost/api/session'); 
    const token = _.get(resp, 'data.success'); 

    const authObj = storage.getFromSession('TOKEN'); 

    return !_.isNil(_.get(authObj, 'Token')) && token; 
}; 

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
    isAuthenticated() ? (
     <Component {...props}/> 
    ) : (
     <Redirect to={{ 
     pathname: '/', 
     state: { from: props.location } 
     }}/> 
    ) 
)}/> 
) 
export default PrivateRoute; 

仪表板正试图使即使用户没有通过认证。如何等待我的api电话被退回,然后将用户重定向到/dashboard/(主页)?

回答

0

我最后的尝试,你可以使用一个组件是这样的:

import React, {PropTypes} from 'react'; 
import {Redirect} from 'react-router-dom'; 
export default class PrivateRoute extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state={loading:true,authenticated:false} 
    } 
    componentDidMount(){ 
    /* your authentication logic...*/ 
    setTimeout(()=>{ 
     this.setState({loading:false,authenticated:true}); 
    },3000) 
    } 
    render() { 
    if(this.state.loading) 
    return <h1>Loading</h1>; 

    if(this.state.authenticated) 
    return (this.props.children); 
    else 
    return <Redirect to="/" /> 
    } 
} 

而且用它在你的路由器是这样的:

<Route path="/your-protected-route" component={()=><PrivateRoute><YourComponent /></PrivateRoute>} /> 
+0

呀类似的东西当然可以工作,但我希望的一个更可维护的方式来与React路由器做到这一点。一旦我获得多条路线(包括公共和私人路线),管理它可能会有点麻烦。还是)感谢你的建议! – jamez14

+0

您可以使用Mobx或Redux在所有组件之间共享状态来执行此操作 –

+0

添加Mobx/Redux将不利于解决此问题。这个问题不是国家管理,而是管理多条私人或公共的路线。 – jamez14