<CanAccess>
<CanAccess>
is the component form of useCan
.
It internally uses useCan
's return values to provide its functionality.
Passes the given properties to the can
method from your access control provider. After, if it returns true
, it renders the children, otherwise, if it returns false
, it renders fallback
prop if provided. Otherwise, it renders null
.
For more information, refer to Access Control Provider →
Basic Usage
By default, the CanAccess
component will infer the current resource
and the action
based on your route automatically. id
will also be inferred if the current route includes one.
So if you are at the /posts
route, CanAccess
will check authorization for the posts
resource and the list
action.
For /posts/show/:id
route, the action will be show
.
import { CanAccess } from "@refinedev/core";
const MyComponent = () => (
<CanAccess fallback={<CustomFallback />}>
<YourComponent />
</CanAccess>
);
Usage with props
You may have a case like in the /posts/show/:id
page, where, inferred resource is posts
and action is show
, but you want to authorize a different resource eg. category
.
In this case, you can explicitly pass props to the CanAccess
component for authorizing a different resource.
import { CanAccess } from "@refinedev/core";
export const MyComponent = () => {
return (
<Buttons>
<CreateButton>Create</CreateButton>
<CanAccess resource="posts" action="delete">
<DeleteButton>Delete</DeleteButton>
</CanAccess>
</Buttons>
);
};
Properties
It also accepts all the properties of useCan
.
onUnauthorized
Callback to be called when useCan
returns false.
<CanAccess
onUnauthorized={({ resource, reason, action, params }) =>
console.log(
`You cannot access ${resource}-${params.id} resource with ${action} action because ${reason}`,
)
}
>
<YourComponent />
</CanAccess>
fallback
Component to render if useCan
returns false. If undefined
, it renders null
.
<CanAccess fallback={<div>You cannot access this section</div>}>
<YourComponent />
</CanAccess>