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;

我知道要侦听此函数的更改，我需要传递一个组件，但是我认为这是不可能的，因为它是中间件。在这种情况下，我是否真的需要倾听变化，如果可以，我该怎么做（如何模拟这种事情）？

肥胖：示例<PrivateRoute path="/private" component={() => <h1>Private</h1>}/>

Answer 1

尝试一下。

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

Answer 2

使用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 3

登录后，您将分派操作以将登录值存储在store中。如果是，请检查。

，我想您可以将登录令牌存储在localStorage read about WebStorage中，并使用store.get('keyname')轻松地将其取回。

如何在React Router无状态中间件中使用Redux？

3 个答案: