Question

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

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

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

我的问题是该用户仍然可以访问登录页面。

如果loggedin设置为true，我如何禁止访问此页面？

这是我当前的App组件：

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()内条件是否呈现页面。~~

更新：您要阻止登录的用户访问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>)
    }

}

Answer 2

您可以将QPainterPath函数传递给QPainterPath arrow; arrow.moveTo(rect.right(),rect.center().y()); arrow.lineTo(rect.left(),rect.top());组件，当用户点击相应的网址时，该组件将被调用。只需在此处检查用户是否已登录。如果他是onEnter并且想要转到“登录”组件，则只需重定向到您的Route组件，否则请按原样运行。

loggedin

注意：我已经在react-router 3.0版中测试了不高。

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

2 个答案: