Как использовать Redux внутри промежуточного программного обеспечения без учета состояния React Router?

Question

Когда какой-либо пользователь пытается получить доступ к любой странице моего приложения, вызывается промежуточное программное обеспечение React Router, чтобы проверить, вошел ли пользователь в систему. Проблема в том, что для доступа к хранилищу Redux мне нужно использовать store.getState(), и если я используюstore.listen(...) Я получаю сообщение об ошибке ('component' doesn't exist).

const PrivateRoute = ({ component: Component, ...rest }) => { // Receive component and path
  return (
    <Route { ...rest } render={(props) => {
        return store.getState().login.token.status === 200
          ? <Component { ...props } />
          : <Redirect to="/login" />
       }}
    />
  )
}

// store.subscribe(PrivateRoute) // Error when some page is requested

export default PrivateRoute;

Я знаю, что для прослушивания изменений в этой функции мне нужно передать компонент, но я думаю, что это невозможно, потому что это промежуточное ПО.Мне действительно нужно прислушиваться к изменениям в этом случае, если да, как я могу это сделать (как издеваться над вещами такого типа)?

Obs : Пример <PrivateRoute path="/private" component={() => <h1>Private</h1>}/>

Answer 1

Использование Redux

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

const PrivateRoute = ({ component: Component, auth: auth, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      auth.isAuthenticated === true ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps)(PrivateRoute);

Answer 2

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

, и я думаю, что вы можете сохранить токен входа в localStorage , прочитать о WebStorage и легко получить его обратно, используя store.get('keyname').

Answer 3

Попробуйте это.

const PrivateRoute = ({ component: Component, hasLogin, ...rest }) => (
 <Route
  {...rest}
  render={props => (
    hasLogin ? (
      <Component {...props} />
    ) : (
      <Redirect
        to={{
          pathname: '/login'
        }}
      />
    )
  )}
/>
)
export default connect(state => ({
 hasLogin: state.login.hasLogin
}))(PrivateRoute)

При вызове коммутатора вот так

<PrivateRoute exact path='/' component={some page} />