how to pass custom params to access control of ShowButton

For example if I do like this

<ShowButton
                recordItemId={id}
                hideText
                resource="job"
                meta={{
                  companyId,
                  id,
                }}
              />

<ShowButton
                recordItemId={id}
                hideText
                resource="job"
                meta={{
                  companyId,
                  id,
                }}
              />

Here the companyId passed in meta is not passed to the useButtonCanAccess hook, Am I doing something wrong or is this an actual bug in refinedev/antd package? I have raised an issue as well

2 Replies

kapa.ai•5d ago

Hi @Supa hot fire. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, it appears that you've identified a limitation in how the meta prop is handled in relation to access control for buttons in refine. Currently, the accessControl prop in buttons like ShowButton doesn't directly support passing custom parameters to the access control check. The buttons have hardcoded parameters that are passed to the useCan hook, which typically include only the id and resource values. According to an issue discussion, this is a known limitation. A user requested a similar feature to allow custom params to be passed to the access control property on refine buttons in this GitHub issue. The refine team responded that they're not planning to add more props/options to the button components for this purpose. The recommended workaround is to wrap the button with the <CanAccess /> component, which allows you to pass custom parameters:

<CanAccess
    resource="job"
    action="show"
    params={{
        id: id,
        companyId: companyId,
        resource: resource
    }}
>
    <ShowButton
        hideText
        recordItemId={id}
        resource="job"
        meta={{
          companyId,
          id,
        }}
        accessControl={{ enabled: false }}
    />
</CanAccess>

<CanAccess
    resource="job"
    action="show"
    params={{
        id: id,
        companyId: companyId,
        resource: resource
    }}
>
    <ShowButton
        hideText
        recordItemId={id}
        resource="job"
        meta={{
          companyId,
          id,
        }}
        accessControl={{ enabled: false }}
    />
</CanAccess>

Note that you need to set accessControl={{ enabled: false }} on the button to disable its built-in access control check since you're handling it with the CanAccess component. Another alternative mentioned by the refine team is to "swizzle" (customize) the ShowButton component to accept the props you need if you're using this pattern in multiple places. The meta prop you're passing is correctly used for navigation purposes, but it's not automatically passed to the access control check. This appears to be by design rather than a bug, based on the team's response to the feature request. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@541506908301819930> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

how to pass custom params to access control of ShowButton

Did you find this page helpful?