CODEWITHSUNDEEP
reactjsreact-admin
indianwebdevil
indianwebdevil

Reputation: 5127

Show or Hide Resource based on Permission in React Admin Not working

Show or Hide Resource based on Permission in React Admin Not working.

Trying to render a resource based on permissions.

Here is my solution

const App = () => {

const { loading, permissions } = usePermissions(); 

return(
  <BrowserRouter>
    loading
    ? (<div>Waiting for permissions...</div>)
    : (
      <Admin  
            catchAll={NotFound} 
            dataProvider={dataProvider} 
            authProvider={authProvider} 
            loginPage={MyLoginPage} 
            >
            Permissions : {permissions} // Value: MEMBER, but the equality check fails.
            {permissions => [

            permissions === 'MEMBER' 
            ? <Resource name="address" options={{ label: 'Address' }} list={AddressList} edit={AddressEdit} create={AddressCreate} icon={GiPostStamp}/> 
            : null, 

           
            permissions === 'MEMBER' 
            ?  <Resource name="posts" options={{ label: 'Posts !' }}
            list={PostsSearchList} icon={GiPostStamp}/> 
            : null
            ]}

       </Admin>
  </BrowserRouter>)
};

export default App;

I am running into similar problem and built the similar solution but still equality check fails, in spite of the value === 'MEMBER'

I am really puzzled on why its happening ?

  1. React Admin render resources based on permissions
  2. React-Admin Permissions with resource
  3. React-Admin Permissions with resource

Upvotes: 2

Views: 810

Answers (2)

Ahmad
Ahmad

Reputation: 9658

In newer version you can use the following syntax after you included authProvider, there is no need to usePermissions hook:

<Admin
    dataProvider={dataProvider}
    authProvider={authProvider}
>
    {permissions => [
        // Restrict access to the edit and remove views to admin only
        <Resource
            name="customers"
            list={VisitorList}
            edit={permissions === 'admin' ? VisitorEdit : null}
            icon={VisitorIcon}
        />,
        // Only include the categories resource for admin users
        permissions === 'admin'
            ? <Resource name="categories" list={CategoryList} edit={CategoryEdit} icon={CategoryIcon} />
            : null,
    ]}
</Admin>

Upvotes: 2

indianwebdevil
indianwebdevil

Reputation: 5127

const App = () => {

const { loading, permissions } = usePermissions(); 

return(
  <BrowserRouter>
    loading
    ? (<div>Waiting for permissions...</div>)
    : (
      <Admin  
            catchAll={NotFound} 
            dataProvider={dataProvider} 
            authProvider={authProvider} 
            loginPage={MyLoginPage} 
            >
            {permissions => [

            permissions === 'MEMBER' 
            ? <>
             <Resource name="address" options={{ label: 'Address' }} list={AddressList} edit={AddressEdit} create={AddressCreate} icon={GiPostStamp}/>
             <Resource name="posts" options={{ label: 'Posts !' }}
            list={PostsSearchList} icon={GiPostStamp}/> 
             </>
            : null, 

          ]}

       </Admin>
  </BrowserRouter>)
};

export default App;

The problem was it allows only one child inside the condition. This way you can include more than one child inside the condition.

Upvotes: 2

Related Questions