React: Building permission HOCs

index.js

import React from 'react'
import history from '@/history'
import make from './make'

export default {
  /**
   * Only guests can enter this page
   */
  guest: make((props) => {
    if (props.auth.data == null) {
      history.push('/')
      return false;
    }
  }),

  /**
   * Only authenticated users can enter this page
   */
  auth: make((props) => {
    if (props.auth.data != null) {
      history.push('/login')
      return false;
    }
  })
}

make.js

import React, {cloneElement} from 'react'

/**
 * Permission high-order component
 * @param {Function} condition
 */
function make(condition) {
  return (Component) => {
    class Permission extends React.Component {
      state = {
        resolved: false
      }

      componentDidMount() {
        if (condition(this.props) !== false) {
          this.setState({ resolved: true })
        }
      }

      render() {
        if (this.state.resolved) {
          return <div />;
        } else {
          return <Component {...this.props} />;
        }
      }
    }

    return Permission
  }
}

export default make