根据 React Admin 中的权限显示或隐藏资源不起作用

Question

根据 React Admin 中的权限显示或隐藏资源不起作用。

尝试根据权限渲染资源。

这是我的解决方案

const App = () => {

const { loading, permissions } = usePermissions(); 

return(
  <BrowserRouter>
    loading
    ? (<div>Waiting for permissions...</div>)
    : (
      <Admin  
            catchAll={NotFound} 
            dataProvider={dataProvider} 
            authProvider={authProvider} 
            loginPage={MyLoginPage} 
            >
            Permissions : {permissions} // Value: MEMBER, but the equality check fails.
            {permissions => [

            permissions === 'MEMBER' 
            ? <Resource name="address" options={{ label: 'Address' }} list={AddressList} edit={AddressEdit} create={AddressCreate} icon={GiPostStamp}/> 
            : null, 

           
            permissions === 'MEMBER' 
            ?  <Resource name="posts" options={{ label: 'Posts !' }}
            list={PostsSearchList} icon={GiPostStamp}/> 
            : null
            ]}

       </Admin>
  </BrowserRouter>)
};

export default App;

我遇到了类似的问题并构建了类似的解决方案，但尽管值==='MEMBER'，但相等性检查仍然失败

我真的很困惑为什么会发生这种事？

1. React Admin 根据权限渲染资源
2. React-Admin 资源权限
3. React-Admin 资源权限

Answer 1

const App = () => {

const { loading, permissions } = usePermissions(); 

return(
  <BrowserRouter>
    loading
    ? (<div>Waiting for permissions...</div>)
    : (
      <Admin  
            catchAll={NotFound} 
            dataProvider={dataProvider} 
            authProvider={authProvider} 
            loginPage={MyLoginPage} 
            >
            {permissions => [

            permissions === 'MEMBER' 
            ? <>
             <Resource name="address" options={{ label: 'Address' }} list={AddressList} edit={AddressEdit} create={AddressCreate} icon={GiPostStamp}/>
             <Resource name="posts" options={{ label: 'Posts !' }}
            list={PostsSearchList} icon={GiPostStamp}/> 
             </>
            : null, 

          ]}

       </Admin>
  </BrowserRouter>)
};

export default App;

问题是它只允许一名儿童进入该条件。 这样您就可以在该条件中包含多个孩子。

Answer 2

在较新版本中，包含

authProvider

后可以使用以下语法，无需

usePermissions

钩子：

<Admin
    dataProvider={dataProvider}
    authProvider={authProvider}
>
    {permissions => [
        // Restrict access to the edit and remove views to admin only
        <Resource
            name="customers"
            list={VisitorList}
            edit={permissions === 'admin' ? VisitorEdit : null}
            icon={VisitorIcon}
        />,
        // Only include the categories resource for admin users
        permissions === 'admin'
            ? <Resource name="categories" list={CategoryList} edit={CategoryEdit} icon={CategoryIcon} />
            : null,
    ]}
</Admin>