array is not acting like an array and i don't know what to do

August 11, 2023

I am making a react application with django backend. So for protected routes i am doing something like this.

<Route element={<RequireAuth allowedRoles={['admin']}/>}>
            <Route path='admin' element={<Admin />} />
          </Route>

And in RequireAuth.js I have this:

const RequireAuth = (allowedRoles) => {  
    
    const location = useLocation()

    
    const userdata= JSON.parse(localStorage.getItem('user')) || {}  

    return (
        (allowedRoles.includes(userdata.user.role))  
            ? <Outlet />
            : userdata?.token 
            ?  <Navigate to='/unauthorized'  state={{ from: location }} replace />
            
            :<Navigate to='/login' state={{ from: location }} replace />  

    )
}

Doing this also causes the same error, how do I use props in react if not like this 🙁
(allowedRoles.includes(localStorage.getItem('user.role')))

With some help from a youtube tutorial by Dave Gray, as his method wasn’t working, i just opted to use local storage cause i am getting tired but even using local storage, i get the same error

allowedRoles.includes is not a function
TypeError: allowedRoles.includes is not a function

But allowedRoles is an array I think, I had this
<Route element={<RequireAuth allowedRoles='[admin]'/>}>
didn’t work so I did this
<Route element={<RequireAuth allowedRoles={['admin']}/>}>
still No.

In my login I am storing the userdata response as

const response = await axios.post(`http://localhost:8000/login/`, JSON.stringify({ email, password }),{headers:{"Content-Type":"application/json"}})
            console.log(JSON.stringify(response.data))
            localStorage.setItem('user',JSON.stringify(response.data) || [])

This is the console log:
{"token":"2a4d51f5f7132564115e89310487115ba4138c46","user":{"id":1,"email":"admin@admin.com","first_name":"admin","last_name":"admin","role":"admin"}}

I am using the basic Token of django and sending the userdata along with it .
How do I solve this and Is there a better way to handle the user informations on frontend since In future I want to make a UserProfile page that will let them edit there information.

>Solution :

The issue is how you’re passing props here:

<Route element={<RequireAuth allowedRoles={['admin']}/>}>
   <Route path='admin' element={<Admin />} />
</Route>

const RequireAuth = (allowedRoles) => {  
    ...
}

The parameter allowedRoles being used in the RequireAuth functional component is really the props object. You’d need to destructure it if you want to use it as simply allowedRoles. Or you could pass it as props and manually call it where needed as props.allowedRoles.

So you could use either of these approaches:

<Route element={<RequireAuth allowedRoles={['admin']}/>}>
   <Route path='admin' element={<Admin />} />
</Route>

const RequireAuth = (props) => {  
    console.log(props.allowedRoles)
}

const RequireAuth = ({allowedRoles}) => {  
    console.log(allowedRoles)
}