Donghua Liu
Donghua Liu

Reputation: 2186

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>
);

Upvotes: 0

Views: 120

Answers (1)

Gildas Garcia
Gildas Garcia

Reputation: 7066

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>
);

Upvotes: 1

Related Questions