Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Update canAccess doc #9396

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 37 additions & 21 deletions docs/canAccess.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,23 +52,23 @@ The `PostEditButton` component will render the `<EditButton>`.

## `action`

Specify the action you want to check.
If you want to check a specific action, for instance if the user can `delete` a `post`, you can specify this action in the dedicated prop:

```tsx
const permissions = [
{ resource: 'posts', action: ['read', 'edit', 'create'] },
{ resource: 'posts', action: ['read', 'edit', 'create', 'delete'] },
];
canAccess({ permissions, resource: 'posts', action: 'read' }); // true
canAccess({ permissions, resource: 'posts', action: 'edit' }); // true
canAccess({ permissions, resource: 'posts', action: 'create' }); // true
canAccess({ permissions, resource: 'posts', action: 'delete' }); // false
canAccess({ permissions, resource: 'posts', action: 'delete' }); // true
canAccess({ permissions, resource: 'posts', action: 'export' }); // false
```

You don't have to provide an `action` if you just want to know whether users can access the CRUD pages of a resource. This is useful to leverage `canAccess` in an `<Admin>` component children function:
If you just want to know whether users can access any of the resources, you don't have to provide an `action`. For instance, here's how you may display different components depending on resources access rights in the dashboard:

```tsx
import { Admin, Resource, ListGuesser, EditGuesser } from 'react-admin';
import { Admin, usePermissions } from 'react-admin';
import { canAccess } from '@react-admin/ra-rbac';
import { dataProvider } from './dataProvider';

Expand All @@ -84,28 +84,44 @@ const authProvider = {
]),
};

const AccessDashboard = () => {
const { permissions } = usePermissions();
return (
<>
{canAccess({
permissions,
resource: 'commands',
}) ? (
<>List of last orders...</> // no access to this component
) : null}

{canAccess({
permissions,
resource: 'products',
}) ? (
<>List of last products...</>
) : null}
{canAccess({
permissions,
resource: 'categories',
}) ? (
<>List of last categories...</>
) : null}
</>
);
};

export const MyApp = () => (
<Admin authProvider={authProvider} dataProvider={dataProvider}>
{(permissions: Permissions) => (
<>
{canAccess({ permissions, resource: 'products' }) ? (
<Resource name="products" list={ListGuesser} />
) : null}
{canAccess({ permissions, resource: 'categories' }) ? (
<Resource name="categories" list={ListGuesser} edit={EditGuesser} />
) : null}
{canAccess({ permissions, resource: 'commands' }) ? (
<Resource name="commands" list={ListGuesser} />
) : null}
</>
)}
<Admin authProvider={authProvider} dataProvider={dataProvider} dashboard={AccessDashboard}>
{/*...*/}
</Admin>
);
```

In this example, users will see the products list and will be able to click on its category link to edit the category. However, they won't see the categories list nor the commands list.
In this example, users will see the list of last products and the list of last categories but they won't be able to see the list of last orders.


Note that [ra-rbac's `<Resource>` component](./AuthRBAC.md#resource) does this check automatically, so you don't actually need to use `canAccess` in this case.
**Note**: [ra-rbac's `<Resource>` component](./AuthRBAC.md#resource) automatically checks for the `list`, `show`, `create` and `edit` actions, so you don't actually need to use `canAccess` if you want to restrict a whole resource.

```tsx
import { Admin, ListGuesser, EditGuesser } from 'react-admin'; // do not import Resource here
Expand Down
Loading