如果设置了会话变量，则Javascript React重定向

Question

我正在使用反应。 我有一个登录页面，如果变量设置为true，我不希望用户访问该页面。

用户登录并将变量设置为true后，我正在使用sessionStorage：

 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页面，更新我的答案是：在LoginComponent检查loggedIn ，不要重定向到根。 在我的示例中，路由器是ReactRouter 。

例如：

Class LoginComponent extends React.Components {
    constructor(props) {
       super(props);
       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 Component，当用户点击相应的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>
    )
  }
}

注意：我已经在React Router 3.0版中测试过更高版本。