Role-based authorization using React-Router


Written by burczu

  • Cyril Quandalle


    Great article, did you integrate it in a github project ?

  • Champion Roy

    Hi, great article really! But what is RouteHandler component? I have no idea about this stuff.

    • First of all – thanks 😉

      RouteHandler is the wrapper I took from este –

      Here’s its implementation:

      export default class RouterHandler extends React.Component {
      static propTypes = {
      children: PropTypes.object

      render() {
      const { children } = this.props;

      // No children means nothing to render.
      if (!children) {
      return null;

      // That makes nested routes working.
      const propsWithoutChildren = { …this.props };
      delete propsWithoutChildren.children;

      return React.cloneElement(children, propsWithoutChildren);

      So, as you can see it helps cloning elements without children inside props object.

      • Champion Roy

        Thank you very much 🙂

  • Prakhar Singh

    React router Link component breaks AuthorizedComponent and the user can visit the link.

  • Aseem Gupta

    Can you confirm me that though a user cannot access but he can see those routes which are not accessible to him from frontend JS.

  • Erich K

    Couldn’t a malicious user modify their role in local storage and break your front-end authorization?

    • of course, that’s why you always have to double check roles: on the front-end side to display appropriate view and on backend to keep everything safe

  • Ming Hann

    What is the relation btw custom ‘authorize’ attribute and ‘AuthorizedComponent.js’ ?