React Router - перенаправление на основе аутентификации

Question

Я создаю пример страницы входа, чтобы улучшить свои навыки реагирования.Тем не менее, я не мог понять проблему с React Router.Я успешно прошел проверку подлинности, и приложение переносит меня на защищенную страницу, но когда я обновляю страницу на этой защищенной странице, она показывает пустую страницу.

То же самое происходит, когда я пытаюсь написать защищенный URL-адрес вручную.(пустой экран)

Вот этот PrivateRoute

    export const PrivateRoute = ({ 
        isAuthenticated, 
        component: Component,
        ...rest  
    }) => (
       <Route {...rest} render={(props) => {
           if (isAuthenticated) {
               return <Component {...props} />
        }
        else {
            return <Redirect to="/" />
        }

    }} />
);

const mapStateToProps = state => {
    console.log(state.userReducer.token);
    return {
        isAuthenticated: !!state.userReducer.token
    }
};

export default connect(mapStateToProps)(PrivateRoute);

Вот этот PublicRoute

export const PublicRoute = ({ isAuthenticated, component: Component,  ...rest}) => (
    <Route {...rest} render={(props) => {
        if (isAuthenticated) { 
          return <Redirect to="/logged" /> 
        }
        else {
          return <Component {...props} />
        }
    }} />
  );

const mapStateToProps = state => ({
  isAuthenticated: !!state.userReducer.token
});

export default connect(mapStateToProps)(PublicRoute);

AppRouter

const AppRouter = () => {
    return (
    <BrowserRouter>
        <div>
            <PublicRoute path="/" component={LoginForm} exact />
            <PrivateRoute path="/logged" component={LoggedPage} />
        </div>
    </BrowserRouter>
    );
}
export default AppRouter;

И, наконец, последнийтот, который я создаю AppRouter

const  jsx = (
    <Provider store={createStore(reducers)}>
        <AppRouter />
    </Provider>
)
ReactDOM.render(jsx, document.getElementById('root'));

Я ценю любые предложения, спасибо заранее

Answer 1

Когда страница обновляется, она теряет свои состояния, а также ваш логин.Вы должны поместить некоторые данные в локальное хранилище, чтобы сохранить информацию о сеансе.Перед отправкой действия о входе в систему я сохраняю учетные данные пользователей в локальном хранилище.Всякий раз, когда страница перезагружается, я выбираю данные из локального хранилища и отправляю их как действие входа в систему.Так что я держу свою сессию открытой.

export function signInUser(user) {
  let userEmail = user.email;
  let userPassword = user.password;
  let credentials = {
    email: userEmail,
    password: userPassword
  };
  return dispatch => {
    axios
      .request({
        method: "post",
        url: loopBack + "/blogusers/login?include=user",
        data: credentials
      })
      .then(response => {
        //sets user data to local storage
        localStorage.setItem("id", response.data.id);
        localStorage.setItem("userId", response.data.userId);
        localStorage.setItem("userName", response.data.user.userName);
        localStorage.setItem("email", response.data.user.email);
        return dispatch(signInSuccess(response.data));
      })
      .catch(error => {
        return dispatch(signInFailure(error));
      });
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

//if session information is lost it gets data from            localstorage and set user data
export function setToken() {
   return dispatch => {
    let id = localStorage.getItem("id");
    let userId = localStorage.getItem("userId");
    let userName = localStorage.getItem("userName");
    let email = localStorage.getItem("email");
    let user = { id, userId, user: { email, userName } };
    return dispatch(signInSuccess(user));
  };
}