dynamically load resource base on role

customise show resource , based on cookie stored variable

5 Replies

kapa.ai•11mo 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•11mo ago

<@391513391870640138> kapa.ai is still learning and improving, please let us know how it did by reacting below

subsequent-cyan•11mo ago

Hello @Brandon, Could you give more detail? I don't understand the problem.

solid-orange•11mo 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

optimistic-gold•11mo ago

Hello @brandonkhj I think you can use Access Control feature for this one: https://refine.dev/docs/api-reference/core/providers/accessControl-provider/

Access Control Provider | refine

Overview