反应认证HoC

Question

我有一个用expressJS服务器构建的React-Router-Redux应用程序。该应用程序的一部分是使用JWT进行身份验证。除了保护路由之外，我还尝试创建一个HoC，通过在显示包装的组件之前与服务器联系并进行身份验证来保护其包装的组件。这是我建立的HoC：

withAuth.js：

import React, { Component } from 'react';
import {connect} from 'react-redux';
import * as actions from '../../store/actions';

export default function (ComposedComponent) {
  class Authenticate extends Component {

    componentWillMount() {
      console.log('will mount');
      this.props.authenticate();
    }

    render() {
      const { loading, loaded } = this.props;
      return !loading && loaded ? <ComposedComponent {...this.props} /> : null;
    }
  }

  const mapStateToProps = state => {
    return {
      loading: state.auth.loading,
      loaded: state.auth.loaded
    };
  };

  const mapDispatchToProps = dispatch => {
    return {
      authenticate: () => dispatch(actions.authenticate())
    };
  };

  return connect(mapStateToProps, mapDispatchToProps)(Authenticate)
}

我也在使用Redux Saga。 authenticate操作调用一个传奇，将加载设置为true，加载为false并到达服务器。当服务器发送确认消息时，除了cookie和一些数据保存外，loaded设置为true，loading设置为false。

基本上可以，但是问题是，当我使用此HoC输入路由时，身份验证过程进行了两次（HoC的ComponentWillMount被调用了两次），我无法弄清楚原因。发生这种情况的原因是包装组件甚至无法连接到服务器或更改安装/更新时的道具。我在这里想念什么？

这是出现此问题的包装组件之一：

class SealantCustomer extends Component {
  state = {
    controls: {
      ...someControls
    }
  }

  shouldComponentUpdate(nextProps) {
    if (JSON.stringify(this.props.sealantCustomer) === JSON.stringify(nextProps.sealantCustomer)) return false;
    else return true;
  }

  updateInput = (event, controlName) => {
    let updatedControls = inputChangedHandler(event, controlName, this.state.controls);
    this.setState({controls: updatedControls});
  }

  searchCustomer = async (event) => {
    event.preventDefault();
    this.props.fetchCustomer(this.state.controls.phone.value, this.state.controls.site.value, this.state.controls.name.value);
  }

  render () {

    let sealantCustomer;

    if (this.props.loading) {
      sealantCustomer = <Loader />;
    }

    if (!this.props.loading) {
      if (!this.props.sealantCustomer) this.props.error ? sealantCustomer = <h3 style={{color: 'salmon'}}>ERROR: {this.props.error}</h3> : sealantCustomer = <h3>Please search for a sealant customer</h3>
      else if (this.props.sealantCustomer.length === 0) sealantCustomer = <h3>Found no sealant customers with these details!</h3>
      else {
        let data = [];
        this.props.sealantCustomer.forEach(person => {
          ...filling data here
        })

        const columns = [{
          ...table columns
        }]
        const keysToSkip = [keys];

        sealantCustomer = <ReactTable data={data} columns={columns} defaultPageSize={3} className={['-striped', '-highlight', 'tableDefaults'].join(" ")} 
          SubComponent={sub component} />
      }
    }
    return (
      <div className={classes.sealantCustomerPage}>
        <SearchBox controls={this.state.controls} submit={this.searchCustomer} inputUpdate={this.updateInput} name="Sealant Customers" />
        <div className={classes.sealantCustomer}>
          {sealantCustomer}
        </div>
      </div>
    )
  }

};

const mapStateToProps = state => {
  return {
    loading: state.searches.loading,
    error: state.searches.error,
    sealantCustomer: state.searches.sealantCustomer
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchCustomer: (phone, site, name) => dispatch(actions.searchSealantCustomer(phone, site, name))
  };
};

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