如果设置了 session 变量，Javascript React 重定向

Question

我正在使用 react 。我有一个登录页面，如果变量设置为 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 status，然后放入render()是否渲染页面的条件。

更新:您想要阻止登录访问login的人页面，我更新我的答案:在 LoginComponent检查是否 loggedIn ，重定向到 root。我的示例中的路由器是 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>)
    }

}