Question

尝试使用React进行身份验证。在我的Login.js文件中，我有一个handleClick函数，用于获取json（用于会话存储）和一个带有Link Container的提交按钮。现在在我的index.js文件中，我有一个带有replace的requireAuth函数。我的问题是requireAuth函数在我的handleClick之前触发。如何在我的handleClick之后触发它以便handleClick将在登录用户之前检查用户名和密码是否成功？现在它只是推动我进入下一页。代码示例表示赞赏。我正在使用React Router v3。

Login.js：

handleClick() {

    fetch('/backend/login', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            username: this.state.username,
            password: this.state.password
        })
    })
    .then(response =>{
        if (response.ok) {
            response.json().then(data => {
                sessionStorage.setItem('loggedIn', data.success);
                console.log('login success: ' + sessionStorage.getItem('loggedIn'));
            });
        }
        else {
            console.log('failed');
        }
    })  
}

render () {
  <LinkContainer to='/Dashboard'>
    <Button onClick={this.handleClick} type="submit"> Submit /> 
    </Button>
  </LinkContainer> 
}

index.js：

function requireAuth(nextState, replace) {
if (!(sessionStorage.getItem('loggedIn') === true)) {
   console.log(sessionStorage.getItem('loggedIn'));
      replace({
        pathname: '/',
        state: { nextPathname: nextState.location.pathname }
    });
}
}

ReactDOM.render(
 <Router history={browserHistory}>
    <Route path="/" component={Container}>
        <IndexRoute component={Homepage}/>
        <Route path="dashboard" component={Dashboard} onEnter=
{requireAuth}/>
   </Route> 
</Router>

Answer 1

不要使用<LinkContainer to='/Dashboard'>，而是让按钮具有onCLick功能。当登录响应成功时，使用react-router push将用户发送到＆＃39;仪表板＆＃39;路线如下。

import { browserHistory } from 'react-router'; browserHistory.push('/some/path');

React - auth由于触发功能的顺序而无法工作

1 个答案: