Skip to content

Commit 1a96836

Browse files
fzaninottofzaninotto
committed
MAke access control section position consistent
1 parent 0c71fe8 commit 1a96836

File tree

7 files changed

+331
-293
lines changed

7 files changed

+331
-293
lines changed

‎docs/Create.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -701,10 +701,20 @@ export const BookCreate = () => {
701701
};
702702
```
703703

704-
## Security
704+
## Anonymous Access
705705

706706
The `<Create>` component requires authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the [`disableAuthentication`](#disableauthentication) prop.
707707

708+
```jsx
709+
const PostCreate = () => (
710+
<Create disableAuthentication>
711+
...
712+
</Create>
713+
);
714+
```
715+
716+
## Access Control
717+
708718
If your `authProvider` implements [Access Control](./Permissions.md#access-control), `<Create>` will only render if the user has the "create" access to the related resource.
709719

710720
For instance, for the `<PostCreate>`page below:

‎docs/Datagrid.md

Lines changed: 127 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1074,133 +1074,6 @@ Additionally, `<DatagridAG>` is compatible with the [Enterprise version of ag-gr
10741074

10751075
Check [the `<DatagridAG>` documentation](./DatagridAG.md) for more details.
10761076

1077-
## Access Control
1078-
1079-
If you need to hide some columns based on a set of permissions, use the `<Datagrid>` component from the `@react-admin/ra-rbac` package.
1080-
1081-
```diff
1082-
-import { Datagrid } from 'react-admin';
1083-
+import { Datagrid } from '@react-admin/ra-rbac';
1084-
```
1085-
1086-
This component adds the following [RBAC](./AuthRBAC.md) controls:
1087-
1088-
- Users must have the `'read'` permission on a resource column to see it in the export:
1089-
1090-
```jsx
1091-
{ action: "read", resource: `${resource}.${source}` }.
1092-
// or
1093-
{ action: "read", resource: `${resource}.*` }.
1094-
```
1095-
1096-
- Users must have the `'delete'` permission on the resource to see the `<BulkExportButton>`.
1097-
1098-
- The default `rowClick` depends on the user permissions:
1099-
- `"edit"` if the user can access the current resource with the `edit` action
1100-
- `"show"` if the user can access the current resource with the `show` action
1101-
- empty otherwise
1102-
1103-
Here is an example of `<Datagrid>` with RBAC:
1104-
1105-
```tsx
1106-
import { canAccessWithPermissions, List, Datagrid } from '@react-admin/ra-rbac';
1107-
import {
1108-
ImageField,
1109-
TextField,
1110-
ReferenceField,
1111-
NumberField,
1112-
} from 'react-admin';
1113-
1114-
const authProvider = {
1115-
// ...
1116-
canAccess: async ({ action, record, resource }) =>
1117-
canAccessWithPermissions({
1118-
permissions: [
1119-
{ action: 'list', resource: 'products' },
1120-
{ action: 'read', resource: 'products.thumbnail' },
1121-
{ action: 'read', resource: 'products.reference' },
1122-
{ action: 'read', resource: 'products.category_id' },
1123-
{ action: 'read', resource: 'products.width' },
1124-
{ action: 'read', resource: 'products.height' },
1125-
{ action: 'read', resource: 'products.price' },
1126-
{ action: 'read', resource: 'products.description' },
1127-
// { action: 'read', resource: 'products.stock' },
1128-
// { action: 'read', resource: 'products.sales' },
1129-
// { action: 'delete', resource: 'products' },
1130-
{ action: 'show', resource: 'products' },
1131-
],
1132-
action,
1133-
record,
1134-
resource
1135-
}),
1136-
};
1137-
1138-
const ProductList = () => (
1139-
<List>
1140-
{/* The datagrid has no bulk actions as the user doesn't have the 'delete' permission */}
1141-
<Datagrid>
1142-
<ImageField source="thumbnail" />
1143-
<TextField source="reference" />
1144-
<ReferenceField source="category_id" reference="categories">
1145-
<TextField source="name" />
1146-
</ReferenceField>
1147-
<NumberField source="width" />
1148-
<NumberField source="height" />
1149-
<NumberField source="price" />
1150-
<TextField source="description" />
1151-
{/** These two columns are not visible to the user **/}
1152-
<NumberField source="stock" />
1153-
<NumberField source="sales" />
1154-
</Datagrid>
1155-
</List>
1156-
);
1157-
```
1158-
1159-
**Tip**: Adding the 'read' permission on the resource itself doesn't grant the 'read' permission on the columns. If you want a user to see all possible columns, add the 'read' permission on columns using a wildcard:
1160-
1161-
```jsx
1162-
{ action: "read", resource: "products.*" }.
1163-
```
1164-
1165-
Fow simple cases, you can also use [the `useCanAccess` hook](./useCanAccess.md) to check whether users have access to a field:
1166-
1167-
{% raw %}
1168-
```tsx
1169-
import { List, Datagrid, TextField, TextInput, ShowButton, useCanAccess } from 'react-admin';
1170-
1171-
const getUserFilters = (canAccessRole) => ([
1172-
<TextInput label="user.list.search" source="q" alwaysOn />,
1173-
<TextInput source="name" />,
1174-
canAccessRole ? <TextInput source="role" /> : null,
1175-
].filter(filter => filter !== null)
1176-
);
1177-
1178-
export const UserList = ({ permissions, ...props }) => {
1179-
const { canAccess, error, isPending } = useCanAccess({
1180-
resource: 'users.role',
1181-
action: 'read'
1182-
});
1183-
return (
1184-
<List
1185-
{...props}
1186-
filters={getUserFilters(canAccess)}
1187-
sort={{ field: 'name', order: 'ASC' }}
1188-
>
1189-
<Datagrid>
1190-
<TextField source="id" />
1191-
<TextField source="name" />
1192-
{canAccess ? <TextField source="role" /> : null}
1193-
<EditButton />
1194-
<ShowButton />
1195-
</Datagrid>
1196-
</List>
1197-
)
1198-
};
1199-
```
1200-
{% endraw %}
1201-
1202-
Note how the `canAccess` value is passed down to the custom `filters` component to allow Filter customization, too.
1203-
12041077
## Standalone Usage
12051078

12061079
You can use the `<Datagrid>` component to display data that you've fetched yourself. You'll need to pass all the props required for its features:
@@ -1471,3 +1344,130 @@ export const PostList = () => (
14711344
</List>
14721345
);
14731346
```
1347+
1348+
## Access Control
1349+
1350+
If you need to hide some columns based on a set of permissions, use the `<Datagrid>` component from the `@react-admin/ra-rbac` package.
1351+
1352+
```diff
1353+
-import { Datagrid } from 'react-admin';
1354+
+import { Datagrid } from '@react-admin/ra-rbac';
1355+
```
1356+
1357+
This component adds the following [RBAC](./AuthRBAC.md) controls:
1358+
1359+
- Users must have the `'read'` permission on a resource column to see it in the export:
1360+
1361+
```jsx
1362+
{ action: "read", resource: `${resource}.${source}` }.
1363+
// or
1364+
{ action: "read", resource: `${resource}.*` }.
1365+
```
1366+
1367+
- Users must have the `'delete'` permission on the resource to see the `<BulkExportButton>`.
1368+
1369+
- The default `rowClick` depends on the user permissions:
1370+
- `"edit"` if the user can access the current resource with the `edit` action
1371+
- `"show"` if the user can access the current resource with the `show` action
1372+
- empty otherwise
1373+
1374+
Here is an example of `<Datagrid>` with RBAC:
1375+
1376+
```tsx
1377+
import { canAccessWithPermissions, List, Datagrid } from '@react-admin/ra-rbac';
1378+
import {
1379+
ImageField,
1380+
TextField,
1381+
ReferenceField,
1382+
NumberField,
1383+
} from 'react-admin';
1384+
1385+
const authProvider = {
1386+
// ...
1387+
canAccess: async ({ action, record, resource }) =>
1388+
canAccessWithPermissions({
1389+
permissions: [
1390+
{ action: 'list', resource: 'products' },
1391+
{ action: 'read', resource: 'products.thumbnail' },
1392+
{ action: 'read', resource: 'products.reference' },
1393+
{ action: 'read', resource: 'products.category_id' },
1394+
{ action: 'read', resource: 'products.width' },
1395+
{ action: 'read', resource: 'products.height' },
1396+
{ action: 'read', resource: 'products.price' },
1397+
{ action: 'read', resource: 'products.description' },
1398+
// { action: 'read', resource: 'products.stock' },
1399+
// { action: 'read', resource: 'products.sales' },
1400+
// { action: 'delete', resource: 'products' },
1401+
{ action: 'show', resource: 'products' },
1402+
],
1403+
action,
1404+
record,
1405+
resource
1406+
}),
1407+
};
1408+
1409+
const ProductList = () => (
1410+
<List>
1411+
{/* The datagrid has no bulk actions as the user doesn't have the 'delete' permission */}
1412+
<Datagrid>
1413+
<ImageField source="thumbnail" />
1414+
<TextField source="reference" />
1415+
<ReferenceField source="category_id" reference="categories">
1416+
<TextField source="name" />
1417+
</ReferenceField>
1418+
<NumberField source="width" />
1419+
<NumberField source="height" />
1420+
<NumberField source="price" />
1421+
<TextField source="description" />
1422+
{/** These two columns are not visible to the user **/}
1423+
<NumberField source="stock" />
1424+
<NumberField source="sales" />
1425+
</Datagrid>
1426+
</List>
1427+
);
1428+
```
1429+
1430+
**Tip**: Adding the 'read' permission on the resource itself doesn't grant the 'read' permission on the columns. If you want a user to see all possible columns, add the 'read' permission on columns using a wildcard:
1431+
1432+
```jsx
1433+
{ action: "read", resource: "products.*" }.
1434+
```
1435+
1436+
Fow simple cases, you can also use [the `useCanAccess` hook](./useCanAccess.md) to check whether users have access to a field:
1437+
1438+
{% raw %}
1439+
```tsx
1440+
import { List, Datagrid, TextField, TextInput, ShowButton, useCanAccess } from 'react-admin';
1441+
1442+
const getUserFilters = (canAccessRole) => ([
1443+
<TextInput label="user.list.search" source="q" alwaysOn />,
1444+
<TextInput source="name" />,
1445+
canAccessRole ? <TextInput source="role" /> : null,
1446+
].filter(filter => filter !== null)
1447+
);
1448+
1449+
export const UserList = ({ permissions, ...props }) => {
1450+
const { canAccess, error, isPending } = useCanAccess({
1451+
resource: 'users.role',
1452+
action: 'read'
1453+
});
1454+
return (
1455+
<List
1456+
{...props}
1457+
filters={getUserFilters(canAccess)}
1458+
sort={{ field: 'name', order: 'ASC' }}
1459+
>
1460+
<Datagrid>
1461+
<TextField source="id" />
1462+
<TextField source="name" />
1463+
{canAccess ? <TextField source="role" /> : null}
1464+
<EditButton />
1465+
<ShowButton />
1466+
</Datagrid>
1467+
</List>
1468+
)
1469+
};
1470+
```
1471+
{% endraw %}
1472+
1473+
Note how the `canAccess` value is passed down to the custom `filters` component to allow Filter customization, too.

‎docs/Edit.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -981,10 +981,20 @@ export const BookEdit = () => {
981981
};
982982
```
983983

984-
## Security
984+
## Anonymous Access
985985

986986
The `<Edit>` component requires authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the [`disableAuthentication`](#disableauthentication) prop.
987987

988+
```jsx
989+
const PostEdit = () => (
990+
<Edit disableAuthentication>
991+
...
992+
</Edit>
993+
);
994+
```
995+
996+
## Access Control
997+
988998
If your `authProvider` implements [Access Control](./Permissions.md#access-control), `<Edit>` will only render if the user has the "edit" access to the related resource.
989999

9901000
For instance, for the `<PostEdit>`page below:
@@ -1012,4 +1022,4 @@ const PostEdit = () => (
10121022

10131023
Users without access will be redirected to the [Access Denied page](./Admin.md#accessdenied).
10141024

1015-
**Note**: Access control is disabled when you use [the `disableAuthentication` prop](#disableauthentication).
1025+
**Note**: Access control is disabled when you use [the `disableAuthentication` prop](#disableauthentication).

‎docs/Resource.md

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -321,25 +321,6 @@ const MyComponent = () => (
321321
);
322322
```
323323

324-
## Security
325-
326-
The usual components for the `<Resource>` routes ( `<List>`, `<Create>`, `<Edit>`, `<Show>`) require authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the [`disableAuthentication`](./List.md#disableauthentication) prop on the component.
327-
328-
In addition, if your `authProvider` implements [Access Control](./Permissions.md#access-control), these components will only render if the user has the right permission (e.g., `{ action: 'list', resource: 'posts' }` for the `list` page of the `posts` resource).
329-
330-
For instance, given the following resource:
331-
332-
```tsx
333-
<Resource name="posts" list={PostList} create={PostCreate} edit={PostEdit} show={PostShow} />
334-
```
335-
336-
React-admin will call the `authProvider.canAccess` method when users try to access the pages with the following parameters:
337-
338-
- For the list page: `{ action: "list", resource: "posts" }`
339-
- For the create page: `{ action: "create", resource: "posts" }`
340-
- For the edit page: `{ action: "edit", resource: "posts" }`
341-
- For the show page: `{ action: "show", resource: "posts" }`
342-
343324
## Nested Resources
344325

345326
React-admin doesn't support nested resources, but you can use [the `children` prop](#children) to render a custom component for a given sub-route. For instance, to display a list of songs for a given artist:
@@ -464,3 +445,29 @@ When users navigate to the `/posts` route, react-admin will display a loading in
464445
465446
![Loading indicator](./img/lazy-resource.png)
466447
448+
## Anonymous Access
449+
450+
The usual components for the `<Resource>` routes ( `<List>`, `<Create>`, `<Edit>`, `<Show>`) require authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the [`disableAuthentication`](./List.md#disableauthentication) prop on the component.
451+
452+
## Access Control
453+
454+
In addition, if your `authProvider` implements [Access Control](./Permissions.md#access-control), these components will only render if the user has the right permission (e.g., `{ action: 'list', resource: 'posts' }` for the `list` page of the `posts` resource).
455+
456+
For instance, given the following resource:
457+
458+
```tsx
459+
<Resource
460+
name="posts"
461+
list={PostList}
462+
create={PostCreate}
463+
edit={PostEdit}
464+
show={PostShow}
465+
/>
466+
```
467+
468+
React-admin will call the `authProvider.canAccess` method when users try to access the pages with the following parameters:
469+
470+
- For the list page: `{ action: "list", resource: "posts" }`
471+
- For the create page: `{ action: "create", resource: "posts" }`
472+
- For the edit page: `{ action: "edit", resource: "posts" }`
473+
- For the show page: `{ action: "show", resource: "posts" }`

‎docs/Show.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -701,10 +701,20 @@ export const BookShow = () => {
701701
};
702702
```
703703

704-
## Security
704+
## Anonymous Access
705705

706706
The `<Show>` component requires authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the [`disableAuthentication`](#disableauthentication) prop.
707707

708+
```jsx
709+
const PostShow = () => (
710+
<Show disableAuthentication>
711+
...
712+
</Show>
713+
);
714+
```
715+
716+
## Access Control
717+
708718
If your `authProvider` implements [Access Control](./Permissions.md#access-control), `<Show>` will only render if the user has the "show" access to the related resource.
709719

710720
For instance, for the `<PostShow>`page below:

0 commit comments

Comments
 (0)