React: How to use render props to implement Role Based Authentication

Question

I want to implement role based authorization using render props. I have three user types and I want to give each user type access to different parts of the nav bar and different pages in my application.

I am not sure how to implement it, any suggestions? I tried using a HOC but that didn't work out for me.

I suppose you have to save in the state of redux a value of userType or something. Make an action creator that checks the type of the user, either with an api call or checking the properties of the user object. Then use a mapStateToProps to bind the userType redux state to a prop in you component, and use conditionals to check what type of user is logged. — Paul Miranda, Jul 04 '19 at 23:38

Tenusha Guruge · Answer 1 · 2019-07-05T05:36:27.827

Here is one way of doing it,

assuming that user is stored in local storage (or you can save it in the state of redux),

var user = localStorage.getItem('user')
if (user) {
   user = JSON.parse(user)
}

inside return() :

            <Switch>
                {/*any user*/}
                <Route exact path='/' component={Home}/>
                <Route exact path='/home' component={Home}/>
                <Route exact path='/about' component={About}/>
                <Route exact path='/contact' component={Contact}/>
                <Route exact path='/register' component={Register}/>

                {/*admin*/}
                {user && user.role === "ADMIN" &&
                <>                  
                    <Route path='...' component={...}/>
                    <Route path='...' component={...}/>
                    <Route path='...' component={...}/>
                </>

                {/*user*/}
                {user && user.role === "USER" &&
                <>                  
                    <Route path='...' component={...}/>
                    <Route path='...' component={...}/>
                    <Route path='...' component={...}/>
                </>

                <Route component={NotFoundPage}/>
            </Switch>

React: How to use render props to implement Role Based Authentication

1 Answers1