1

I am trying to implement role based authentication as seen in this tutorial REACT AUTHENTICATION TUTORIAL

This is my function for react-router-dom

<Switch>
  <Route exact path="/addcloth" component={Authorization(AddCloth, [1], role, [storelist, sectionlist])} />
<Switch />

And this is my authorization function

    export default function Authorization(WrappedComponent, allowedRoles, userType, property) {
        return class WithAuthorization extends React.Component {
            render() {
                if (allowedRoles.includes(userType)) {
                    let Component = <WrappedComponent />;
                    // some code to add property elements into Component
                    return Component;
                } else {
                    return (
                        <AccessDenied />
                    );
                }
            }
        };
    };

As storelist and sectionlist are 2 props for AddCloth component and I am trying to pass that into AddCloth. In the tutorial he didnt mention about the same.

Ashiq
  • 169
  • 2
  • 16

1 Answers1

2

You are almost there. You need to send it as object.

<Switch>
  <Route exact path="/addcloth" component={Authorization(AddCloth, [1], 
    role, {storelist, sectionlist})} />
<Switch />

In HOC, destructure the props and assign to component.

    export default function Authorization(WrappedComponent, allowedRoles, userType, props) {
    return class WithAuthorization extends React.Component {
        render() {
            if (allowedRoles.includes(userType)) {
                let Component = <WrappedComponent {...props} />;
                // some code to add property elements into Component
                return Component;
            } else {
                return (
                    <AccessDenied />
                );
            }
        }
    };
};
parkourkarthik
  • 834
  • 1
  • 8
  • 20