Переадресация для входа в систему, только если пользователь не аутентифицирован реагировать

Question

Я пытаюсь внедрить простую систему аутентификации в реагирующее приложение. До сих пор я реализовал OAuth с Google. После успешного входа в систему я получаю этот токен от Google, а затем сохраняю его в файлах cookie. Эта часть работает правильно. Итак, в компоненте App.jsx я объявил маршруты и создал компонент PriveRoute. Я только добавляю необходимые коды

Маршрутизация в App.jsx

<Switch>
   <Route path={`${this.props.match.url}/checkout`} component={Checkout} />
   <PrivateRoute path={`${this.props.match.url}/dashboard`} authenticated={Cookies.get('authToken')} component={Dashboard} />
   <Route path={`${this.props.match.url}/profile`} component=
</Switch>

PrivateRoute

 const PrivateRoute = ({ authenticated, component: Component, ...rest }) => {
            { console.log(authenticated) }
            return <Route {...rest} render={(props) => (
                authenticated
                    ? <Component {...props} />
                    : this.props.history.push('/login')
            )} />
        }

Оба из них находятся внутри метода рендеринга приложения. jsx

Я использую js-cookie для использования Cookies.

Так что после успешного входа пользователя я уже установил authToken как cook ie через сервер express. После этого express сервер перенаправляет на app/dashboard URL. Так что здесь, в App.jsx, как у меня есть маршруты. Первый раз, когда пользователь входит в систему с Google, он перенаправляет на панель управления и работает как положено.

Но если я обновлю sh страницу, она всегда перенаправляется на страницу входа в систему ..

Я не могу понять, что происходит .. Любая помощь будет принята!

Answer 1

Убедитесь, что authToken сохраняется после refre sh. Если повар ie не сохраняется после refre sh и это просто маркер сеанса, клиент будет считать, что пользователь вышел из системы.

Это может помочь:

Сохранение пользователя вошедшим в систему после обновления / использования токена refre sh с Google OAuth2 в приложении React

Answer 2

Попробуйте Redirect компонент вместо нажатия

import { Redirect } from "react-router-dom"

Вы должны визуализировать компонент сейчас

const PrivateRoute = ({ authenticated, component: Component, ...rest }) => {
            { console.log(authenticated) }
            return <Route {...rest} render={(props) => (
                authenticated
                    ? <Component {...props} />
                    : <Redirect to={{pathname: "/login", state: { from: props.location }}}/>
            )} />
        }