React路由器v4等待xhr身份验证过渡到路由

我想在使用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或/（主页）？

来源

2017-10-06 jamez14

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

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>} />

来源

2017-10-06 13:50:21

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

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

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

React路由器v4等待xhr身份验证过渡到路由

回答

相关问题