refine resources authorize
Unauthorized users have restricted category listings. In _app.tsx, customergroups should not be exposed unless you have permission to do so. However, I can see this part of the communication happening briefly in the Chrome developer tools, so how can I not expose it?
tsx
_app.tsx
return (
<RefineKbarProvider>
<ColorModeContextProvider>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: 'auto' } }} />
<RefineSnackbarProvider>
<DevtoolsProvider>
<Refine
i18nProvider={i18nProvider}
authProvider={authProvider}
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
accessControlProvider={accessControlProvider}
notificationProvider={notificationProvider}
resources={
{
name: 'customergroups',
list: '/customergroups',
meta: {
label: '혜택 관리',
canDelete: true,
},
},tsx
_app.tsx
return (
<RefineKbarProvider>
<ColorModeContextProvider>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: 'auto' } }} />
<RefineSnackbarProvider>
<DevtoolsProvider>
<Refine
i18nProvider={i18nProvider}
authProvider={authProvider}
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
accessControlProvider={accessControlProvider}
notificationProvider={notificationProvider}
resources={
{
name: 'customergroups',
list: '/customergroups',
meta: {
label: '혜택 관리',
canDelete: true,
},
},import { AccessControlProvider } from '@refinedev/core'
import { authProvider } from './authProvider'
export const accessControlProvider: AccessControlProvider = {
can: async ({ resource, action, params }) => {
if (!authProvider || typeof authProvider.getPermissions !== 'function') {
return {
can: false,
reason: 'AuthProvider or getPermissions is undefined',
}
}
const permissions = await authProvider.getPermissions()
if (permissions && permissions.includes('admin')) {
return { can: true }
}
if (permissions && permissions.includes('editor') && resource === 'points' && action === 'list') {
return { can: true }
}
return {
can: false,
reason: 'Unauthorized',
}
},
}import { AccessControlProvider } from '@refinedev/core'
import { authProvider } from './authProvider'
export const accessControlProvider: AccessControlProvider = {
can: async ({ resource, action, params }) => {
if (!authProvider || typeof authProvider.getPermissions !== 'function') {
return {
can: false,
reason: 'AuthProvider or getPermissions is undefined',
}
}
const permissions = await authProvider.getPermissions()
if (permissions && permissions.includes('admin')) {
return { can: true }
}
if (permissions && permissions.includes('editor') && resource === 'points' && action === 'list') {
return { can: true }
}
return {
can: false,
reason: 'Unauthorized',
}
},
}
