A Higher-Order Component to Authorize your React Components

withAuthorization.tsx

import * as React from 'react';

// other parameters like allowed roles can also be passed to this HOC
// depending on your requirement.

export const withAuthorization = (OriginalComponent:any) => {

  return class extends React.Component {
  
    render(){
    
      // as I mentioned earlier, we are storing current_user's role
      // in localStorage(can be tampered easily)
      
      const currentUserRole:string = window.localStorage.getItem('user_role');
      
      // we will return null if the user is not Admin else we will return 
      // back the component as it is(ofcourse you can modify it like add some extra props to it)
      
      return(
        currentUserRole !== 'admin' ?
        null : <OriginalComponent {...this.props} />
      );
    }
  }
}