RestrictedRoute.js

RestrictedRoute.js

import PropTypes from 'prop-types';
import React from 'react';
import { hasFeature, hasPermission } from 'lib/auth';
import { Route, Redirect } from 'react-router-dom';

class RestrictedRoute extends React.Component {
  static propTypes = {
    component: PropTypes.func,
    features: PropTypes.array,
    permissions: PropTypes.array
  };

  state = { isAuthorized: false };

  componentDidMount() {
    const { features = [], permissions = [] } = this.props;

    let isAuthorized = false;

    if (features.length && permissions.length) {
      isAuthorized = hasFeature(features) && hasPermission(permissions);
    } else if (features.length) {
      isAuthorized = hasFeature(features);
    } else if (permissions.length) {
      isAuthorized = hasPermission(permissions);
    }

    console.log('Is auth? ', isAuthorized);

    this.setState(state => {
      console.log('STATE: ', state, isAuthorized);
      if (state.isAuthorized === isAuthorized) {
        return null;
      }

      return { isAuthorized };
    });
  }

  render() {
    const { component: Component, ...rest } = this.props;
    console.log('hey rendering', this.state);

    return (
      <Route
        {...rest}
        render={props => {
          console.log('oh hai')
          if (this.state.isAuthorized) {
            return <Component {...props} />;
          }

          return <Redirect to="/unauthorized" />;
        }}
      />
    );
  }
}

export default RestrictedRoute;