Question

我正在尝试设置受保护的路由，如果用户未登录则将其重定向到/ login页面，但使用redux时该路由不起作用。

这是我的ProtectedRoute组件：

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

import { authenticate } from './actions';

const ProtectedRoute = ({
  component: Component, authenticate, isAuthenticated, ...rest
}) => {
  useEffect(() => {
    authenticate();
  });

  return (
    <Route
      {...rest}
      render={props => (isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      ))
      }
    />
  );
};

ProtectedRoute.propTypes = {
  component: PropTypes.elementType.isRequired,
  authenticate: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool.isRequired,
};

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

const mapDispatchToProps = {
  authenticate,
};

export default connect(mapStateToProps, mapDispatchToProps)(ProtectedRoute);

这是路线：

<Provider store={store}>
  <Router>
    <Switch>
      <ProtectedRoute exact path="/" component={App} />
      <Route path="/login" component={LoginPage} />
    </Switch>
  </Router>
</Provider>

现在，在将其标记为重复之前，我已经尝试了其他线程中的解决方案。

使用withRouter无效。

withRouter(connect(mapStateToProps, mapDispatchToProps)(ProtectedRoute))

与{pure: false}相同

connect(mapStateToProps, mapDispatchToProps, null, {pure: false})(ProtectedRoute);

我也使用Switch。我不确定如何使它工作。

Answer 1

为什么不使用HOC组件检查身份验证？

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default ChildComponent => {
  class ComposedComponent extends Component {

    componentDidMount() {
      this.shouldNavigateAway();
    }

    componentDidUpdate() {
      this.shouldNavigateAway();
    }
    shouldNavigateAway() {
      if (!this.props.auth) {
        this.props.history.push('/');
      }
    }
    render() {
      return <ChildComponent {...this.props} />;
    }
  }
  function mapStateToProps(state) {
    return { auth: state.auth.authenticated };
  }
  return connect(mapStateToProps)(ComposedComponent);
};

现在您只需要将该组件导入受保护的组件，然后像下面那样导出受保护的组件，

import authCheck from 'blah/blah...'

export default authCheck(ProtectedComponent)

反应路由器专用路由/重定向不与redux一起使用

1 个答案: