dynamically load resource base on role

customise show resource , based on cookie stored variable
5 Replies
kapa.ai
kapa.ai9mo ago
Hi @brandonkhj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The <Show> component in Refine reads the resource information from the route by default. However, if you want to use a custom resource for the <Show> component, you can use the resource prop. Here is an example of how you can use a custom resource:
import { Show } from "@refinedev/mui";

const CustomPage: React.FC = () => {
return (
<Show resource="posts" recordItemId={123}>
<span>Rest of your page here</span>
</Show>
);
};
import { Show } from "@refinedev/mui";

const CustomPage: React.FC = () => {
return (
<Show resource="posts" recordItemId={123}>
<span>Rest of your page here</span>
</Show>
);
};
In this example, the resource prop is set to "posts". If you want to customize this based on a cookie-stored variable, you would need to read the cookie first and then pass the value to the resource prop. However, the provided extracts do not include information on how to read cookies in a Refine application. For that, you might want to refer to additional resources or libraries that handle cookies in a React application, such as js-cookie or react-cookie. For more information, refer to the resource section of the <Show> component documentation (https://refine.dev/docs/api-reference/mui/components/basic-views/show/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai9mo ago
<@391513391870640138> kapa.ai is still learning and improving, please let us know how it did by reacting below
correct-apricot
correct-apricot9mo ago
Hello @Brandon, Could you give more detail? I don't understand the problem.
conscious-sapphire
conscious-sapphire9mo ago
at the app.tsx
<Refine
dataProvider={dataProvider(API_URL, axiosInstance)}
notificationProvider={notificationProvider}
authProvider={authProvider}
i18nProvider={i18nProvider}
routerProvider={routerBindings}
resources={[
{
name: 'projects',
list: '/projects',
create: '/projects/create',
edit: '/projects/edit/:id',
show: '/projects/show/:id',
meta: {
hide: viewType === 'tenant',
icon: <IconCategory />,
}
},
<Refine
dataProvider={dataProvider(API_URL, axiosInstance)}
notificationProvider={notificationProvider}
authProvider={authProvider}
i18nProvider={i18nProvider}
routerProvider={routerBindings}
resources={[
{
name: 'projects',
list: '/projects',
create: '/projects/create',
edit: '/projects/edit/:id',
show: '/projects/show/:id',
meta: {
hide: viewType === 'tenant',
icon: <IconCategory />,
}
},
right now just using the meta.hide any other way to load the resources based on user role
ratty-blush
ratty-blush9mo ago
Hello @brandonkhj I think you can use Access Control feature for this one: https://refine.dev/docs/api-reference/core/providers/accessControl-provider/