flat-fuchsia
flat-fuchsiaβ€’2y ago

Restrict an entier ressources with usePermission

Hi everyone !! I try to display ressources according to certains roles return by the API. I see in the doc that we can limit editing according to roles or limit certain view but how can we limit an entiere ressources ?
5 Replies
fair-rose
fair-roseβ€’2y ago
Hi,
maybe you can create <HavePermission> component and you can wrap your resources
const HavePermission: React.FC<React.PropsWithChildren> = ({ children }) => {
const resource = useResource()
const { data: permissionsData } = usePermissions()

// do business logic here to check if user has permission to access this resource

// if not, return null or redirect to another page

// if yes, return children
return <>{children}</>
}
const HavePermission: React.FC<React.PropsWithChildren> = ({ children }) => {
const resource = useResource()
const { data: permissionsData } = usePermissions()

// do business logic here to check if user has permission to access this resource

// if not, return null or redirect to another page

// if yes, return children
return <>{children}</>
}
`
<Refine
// ...
resources={[
{
name: 'products',
list: () => (
<HavePermission>
<ProductList />
</HavePermission>
),
},
]}
/>
<Refine
// ...
resources={[
{
name: 'products',
list: () => (
<HavePermission>
<ProductList />
</HavePermission>
),
},
]}
/>
for more fine tuned permission handling, probably this https://refine.dev/docs/api-reference/core/providers/accessControl-provider/ is a better option
flat-fuchsia
flat-fuchsiaβ€’2y ago
Thank you @alicanerdurmaz, is it possible t o do it on pages of a ressouces object instead of do it a it page ? For example, specifie an option like we specify a DataProvider
resources={
// ...other ressources
[
{
name: "users",
list: UsersList,
show: UsersShow,
edit: UserEdit,
options: {
// **refine** will use the `users` data provider for this resource
dataProviderName: "users"
}
}
]
}
resources={
// ...other ressources
[
{
name: "users",
list: UsersList,
show: UsersShow,
edit: UserEdit,
options: {
// **refine** will use the `users` data provider for this resource
dataProviderName: "users"
}
}
]
}
fair-rose
fair-roseβ€’2y ago
unfortunately not 😦 refine handles this with more finely-tuned with accessControlProvider for example; when you use ths code, all products pages will give 404 and will remove on sider.
accessControlProvider={{
can: async ({ resource, action, params }) => {
if (resource === 'products') {
return Promise.resolve({
can: false,
reason: 'Unauthorized',
})
}

return Promise.resolve({ can: true })
},
}}
accessControlProvider={{
can: async ({ resource, action, params }) => {
if (resource === 'products') {
return Promise.resolve({
can: false,
reason: 'Unauthorized',
})
}

return Promise.resolve({ can: true })
},
}}
flat-fuchsia
flat-fuchsiaβ€’2y ago
Ok thank you @alicanerdurmaz, have a nice day πŸ’ͺ
fair-rose
fair-roseβ€’2y ago
you too πŸ™