如果设置了会话变量，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()

条件中以决定是否渲染页面。

更新：您想阻止登录访问

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

您可以将

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>
    )
  }
}

注意：我已经在react-router 3.0版本而不是更高版本中进行了测试。

Answer 3

使用

useNavigate()

，您可以在登录组件的开头进行以下检查。

只需确保您的身份验证在登录时设置

validSession

存储项目即可。

const navigate = useNavigate();

if (localStorage.getItem("validSession") === 'true') {
    return navigate("/dashboard", { replace: true });
}