React keep a state in the highest component - reactjs

Question

I am trying to create a React RBAC system where my backend has a field called role: admin for example which tells the access the user has. After a successful sign in, I direct the user to a specific route (using Protected Route) but I want to check that if the user has the clearance level (if role is admin and not general). I thought that if I keep a state where I am routing which stores the role of the user, I can check if the user has the required access and send him accordingly but I am not sure whether this is a good approach and how to do it.
App.js - RequireAuth just checks if the user session exists or not (it then redirects it to login)
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Router>
<Switch>
<Route exact path = '/'
component = {LandingPage}
/>
<Route exact path = '/register'
component = {Register}
/>
<Route exact path = '/addBill'
component = {RequireAuth(AddBill)}
/>
<Route exact path = '/addItem'
component = {RequireAuth(AddItem)}
/>
<Route exact path = '/deleteItem'
component = {RequireAuth(DeleteItem)}
/>
</Switch>
</Router>
</div>
);
}
}
export default withRouter(App);
SignIn.js (I just route the user to the endpoint if it is a successful login or else display an error message)
if(status === 200) {
this.props.history.push('/addItem')
}
RequireAuth does not have access the role of the user but I wanted to implement RBAC on this.

Answer 1

Add your permission data eg : Roles to global App State/Store, you could do this easily with React context API.
//these will probably go in a file AppProvider.js
const AppContext = React.createContext({userRole:'general', setUserRole: ()=>{}});
const AppProvider = ({children}) => {
const [userRole,setUserRole] = React.useState('general');
return <AppContext.Provider value={{ userRole, setUserRole }}>{children}</AppContext.Provider>
}
//end AppProvider.js
const RequireAuth = (component) => {
const {userRole} = React.useContext(AppProvider);
const Component = () => {
//check your RBAC logic here now that you have access to userRole
}
return Component;
}