由於觸發功能的順序，反應 - auth將不起作用

嘗試使用React進行身份驗證。在我的Login.js文件中，我有我的handleClick函數，用於獲取json（與會話存儲一起使用）和帶有鏈接容器的提交按鈕。現在在我的index.js文件中，我有一個帶有replace的requireAuth函數。我的問題是requireAuth函數在我的handleClick之前觸發。我如何使它在我的handleClick之後觸發，以便handleClick在用戶登錄之前檢查用戶名和密碼是否成功？現在它只是不會推動我進入下一頁。代碼示例表示讚賞。我正在使用React Router v3。由於觸發功能的順序，反應 - auth將不起作用

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>

來源

2017-07-17 ChloeH

而不是使用<LinkContainer to='/Dashboard'>的，只是有具有onCLick功能的按鈕。當登錄響應成功時，使用react-router push將用戶發送到「儀表板」路由，如下所示。

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

來源

2017-07-17 19:40:41

由於觸發功能的順序，反應 - auth將不起作用

回答

相關問題