Search code examples
resourcescrudadmin-on-restreact-admin

How to configure the resource and crud operation programmatic according to the user permission on react-admin


I was using react-admin, it's really quickly and productively. However, I want to implement some features like programmatic display resource and crud operation component according to the attributes of a logged user.

Something like this.

const App = () => (
    <Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
        <Resource name="users" list={UserList} haveListPermission={user.hasUsersListPermission}/>
        <Resource name="tags" havePermission={user.hasTagPermission} />
    </Admin>
);

Solution

  • This is documented here: https://marmelab.com/react-admin/Authorization.html

    In a nutshell, the Admin component accepts a function as children (think render prop) which will be called with your permissions (from your authProvider). So assuming you are using react-admin (and not admin-on-rest) and your authProvider resolves with the current user when called with type AUTH_GET_PERMISSIONS:

    const App = () => (
        <Admin authProvider={authProvider} dataProvider={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
            {user => (
                {user.hasUsersListPermission && <Resource name="users" list={UserList} />}
                {user.hasTagPermission && <Resource name="tags" />
            )}
        )}
        </Admin>
    );