Aug 23, 2017 · 1 min read
This is awesome. I agree with Josh that it’s nice to have this without Redux but thought I’d share my implementation with Redux:
import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';/**
* HOC that Handles whether or not the user is allowed to see the page.
* @param {array} allowedRoles - user roles that are allowed to see the page.
* @returns {Component}
*/
export default function Authorization(allowedRoles) {
return WrappedComponent => {class WithAuthorization extends Component {
static propTypes = {
user: PropTypes.object,
};
constructor(props) {
super(props);
}
render() {
const { user } = this.props;
if (allowedRoles.includes(user.account_type)) {
return <WrappedComponent {...this.props} />;
} else {
return <h1>No page for you!</h1>;
}
}
};return connect(state => {
return { user: state.application.user };
})(WithAuthorization);};
};