I am getting the same menu list for all users when I log in. But, I need to display different menu item for different users based on their roles using react-admin.

const cardActionStyle = {
zIndex: 2,
display: 'inline-block',
float: 'right',
};

const PostShowActions = ({ permissions, basePath, data, resource }) => (
<CardActions style={cardActionStyle}>
    <EditButton basePath={basePath} record={data} />
    {permissions === 'admin' &&
        <DeleteButton basePath={basePath} record={data} resource={resource} />
    }
</CardActions>
);

export const PostShow = ({ permissions, ...props }) => (
<Show actions={<PostShowActions permissions={permissions} />} {...props}>
    <SimpleShowLayout>
        <TextField source="title" />
        <RichTextField source="body" />
        {permissions === 'admin' &&
            <NumberField source="nb_views" />
        }
    </SimpleShowLayout>
</Show>
);

1 Answers

0
Mário Ferreiro On

Change the component function to be able to console log the permission prop, like

const Component = ({permissions, ...props}) => {
  console.log("permissions", permissions)
  return <YourComponentRendering/>
}

If permissions object is undefined, you can import <WithPermissions> from React-Admin in order to have permissions prop on you component. Check Authorization for more information.