如果設置了會話變量，則會執行重定向

Question

我正在使用反應。我有一個登錄頁面，如果變量設置爲true，我不希望用戶能夠訪問它。

我在使用sessionStorage的用戶登錄後和一個變量設置爲true：

sessionStorage.setItem('loggedin', 'true'); 

我的問題是使用仍然能夠訪問登錄頁面。

如果登錄設置爲true，我該如何禁止使用此頁面？

這裏是我當前的應用程序組件：

class App extends React.Component { 

    render() { 
    return (
     <Router> 
     <div> 
      <Nav /> 
      <Route exact path="/" component={Home} /> 
      <Route exact path="/contact" component={contact} /> 
      <Route path="/login" component={Login} /> 
     </div> 
     </Router> 
    ) 
    } 

Answer 1

在主要成分（<App/>），把邏輯代碼中ComponentWillMount()或constructor檢查loggedIn狀態，然後把裏面的render()條件來呈現網頁或沒有。

UPDATE：要停止誰登錄後才能訪問login頁面的人，我更新我的回答是：如果loggedIn在LoginComponent檢查，不要重定向到根。在我的例子中路由器是。

e.g：

Class LoginComponent extends React.Components { 
    constructor() { 
     this.loggedIn = sessionStorage.getItem('loggedin') === 'true'; 

    } 

    render() { 
     // my example using reactRouter 
     if(!this.loggedIn) { 
      return <Redirect to='/'/>; 
     } 
     return (<div>Your Login content</div>) 
    } 

} 

Answer 2

您可以通過一個onEnter功能Route組件時，用戶點擊相應的URL將被調用。只需在這裏檢查該用戶是否已登錄。如果他是loggedin並且想要登錄組件，只需重定向到您的Home組件，否則就按原樣。

export function onEnter(nextState, transition, callback) { 
    const { pathname } = nextState.location 
    const isLoggedIn = sessionStorage.getItem('loggedin') === 'true' 
    if (pathname === '/login' && isLoggedIn) { 
    transition('/') //redirect to Home component 
    } 
    return callback() // go as it is. 
} 


class App extends React.Component { 

    render() { 
    return (
     <Router> 
     <div> 
      <Nav /> 
      <Route exact path="/" component={Home} onEnter={onEnter}/> 
      <Route exact path="/contact" component={contact} onEnter={onEnter}/> 
      <Route path="/login" component={Login} onEnter={onEnter}/> 
     </div> 
     </Router> 
    ) 
    } 
} 

注：我已經在反應路由器版本3.0不高於測試。