高阶组件和验证路由

Question

I am creating Higher Order Components in React and making sure that user cannot access the protected routes. Everything works fine but I am unsure where to put the code for checking the redux state. Currently, in the code below I have placed all the code in componentDidMount. This is because componentWillMount is deprecated. Is this the best place to check because componentDidMount is triggered after the component has been mounted.

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

export default function(ComposedComponent) {

  class Authenticate extends Component {

    componentDidMount() {

      if(!this.props.isAuthenticated) {
        this.props.history.push('/')
      }

    }

    render() {
      return (
        <ComposedComponent {...this.props} />
      )
    }
  }

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


return connect(mapStateToProps)(Authenticate)

}

Answer 1

Assuming the correct state is available at construction, you can do the redirect in the constructor:

class Authenticate extends Component {
   constructor(props) {
      super(props);
      if(!props.isAuthenticated) {
         props.history.push('/')
      }
   }
...
}

Answer 2

This is the purpose of React Router Redirect component:

render() {
  return !this.props.isAuthenticated ? (
    <Redirect to="/" />
  ) : (
    <ComposedComponent {...this.props} />
  )
}