<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.
• false, it renders fallback prop if provided. Otherwise, it renders null.

Refer to Access Control Provider for more information. &#8594

Basic Usage

By default, 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 /posts route, CanAccess will check authorization for posts resource and list action.

For /posts/show/:id route, 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 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's also accepts all the properties of useCan.

fallback

Component to render if useCan returns false. If undefined, it renders null.

<CanAccess fallback={<div>You cannot access this section</div>}>
    <YourComponent />
</CanAccess>

API Reference

Properties