afraid-scarlet•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

harsh-harlequin•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

afraid-scarletOP•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"
                    }
                }
            ]
      }

harsh-harlequin•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 })
            },
          }}

afraid-scarletOP•2y ago

Ok thank you @alicanerdurmaz, have a nice day 💪

harsh-harlequin•2y ago

you too 🙏

Restrict an entier ressources with usePermission

Did you find this page helpful?