React Role Based Component

Authorize.js

import React from 'react';
import {
  connect
} from 'react-redux';
import _ from 'lodash';

const Authorize = (allowedRoles) => {
  return (WrappedComponent) => {
    class WithAuthorization extends React.Component {
      constructor (props) {
        super(props);
      }

      render () {
        let roles = [];

        // this depends on how the roles are stored
        if (this.props.auth.user && this.props.auth.user.Roles.length) {
          roles = this.props.auth.user.Roles.map(r => r.name);
        }

        if (_.intersection(allowedRoles, roles).length) {
          let props = {
            ...this.props
          };

          delete props.auth;
          delete props.dispatch;

          return <WrappedComponent {...props} />;
        } else {
          return null;
        }
      }
    }

    const mapStateToProps = (state) => {
      return {
        // .asMutable if you are using seamless-immutable
        auth: state.authentication.asMutable({ deep: true })
      };
    };

    return connect(mapStateToProps)(WithAuthorization);
  };
};

export default Authorize;