I am using react. I have a login page which I don't want the user to be able to visit if a variable is set to true.

I am using sessionStorage after the user logs in and setting a variable to true:

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

My problem is that the use is still able to visit the login page.

How do I disallow the use to visit this page if loggedin is set to true?

Here's my current App Component:

class App extends React.Component {

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

I am using react. I have a login page which I don't want the user to be able to visit if a variable is set to true.

I am using sessionStorage after the user logs in and setting a variable to true:

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

My problem is that the use is still able to visit the login page.

How do I disallow the use to visit this page if loggedin is set to true?

Here's my current App Component:

class App extends React.Component {

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

• javascript
• reactjs
• ecmascript-6

3 Answers 3

In main ponent (<App/>), put the logic code inside ComponentWillMount() or constructor to check loggedIn status, then put inside render() condition to render page or not.

UPDATE: you want to stop people who logged in to access login page, I update my answer: in LoginComponent check if loggedIn, do redirect to root. Router in my example is ReactRouter.

e.g :

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

}

You can pass a onEnter function to Route Component which will be called when a user hits the corresponding URL. Just check here that user is loggedin. If he is loggedin and wants to go to Login ponent, just redirect to your Home ponent otherwise go as it is.

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


class App extends React.Component {

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

Note: I have tested in react-router version 3.0 not higher.

Using useNavigate(), you can put the following check at the start of your Login ponent.

Just make sure your auth is setting the validSession storage item upon login.

const navigate = useNavigate();

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