Как запретить пользователю использовать страницу входа, когда он / она вошли в систему

Question

У меня есть приложение для реагирования, в котором я хочу сделать свои маршруты закрытыми, например, когда пользователь не вошел в систему, они не могут видеть другие страницы и наоборот.

Первый работает нормально, когда я не вошел в систему, я перенаправляю их на страницу входа, т.е. "/" по этому маршруту.

Но когда я вошел в систему и перехожу на этот URL-адрес "/", я могу go войти в систему

"/" это моя страница входа в систему

Мой код

  export const  AuthRoute=({component:Component, ...rest}) => {
  const token = localStorage.getItem('JWT_Token') 
    console.log(token)
    return (
       <Route {...rest} render={
         (props => {
           if(token)
           {

             return <Component {...props}/>
           }
           else{
             return <Redirect to={{
               pathname:"/",
               state:{
                 from:props.location
               }
             }} />
           }
         })
       }/>
    )
}

Мой файл маршрута

    <Switch>
    <Route exact path="/" component={ login } />          
    <AuthRoute  path="/welcome" component={ welcome } /> 
    <AuthRoute  path="/profile" component={ profile } />
    </Switch>

Я проверка пользователя с помощью моего localstorage

При выходе из системы я удаляю токен, поэтому, если нет токена, я выйду из системы.

Что я делаю неправильно, не знаю.

Answer 1

Вы можете написать небольшую оболочку над Route для компонента входа в систему для перенаправления на / welcome при входе в систему

export const LoginRoute=({component:Component, ...rest}) => {
  const token = localStorage.getItem('JWT_Token') 

    return (
       <Route {...rest} render={
         (props => {
           if(token)
           {

             return <Redirect to="/welcome"/>
           }
           else{
             return <Component {...props}/>
           }
         })
       }/>
    );
}

...
<LoginRoute exact path="/" component={ login } />