2017-06-23 17 views
1

因此,我與具有特定角色和權限的用戶合作。這些角色中有兩個是自己的儀表板,但其餘的則不是。所以基本上我做我的App.js是這樣的:管理員休息時:管理組件應在重新呈現正確登錄時

const AdminProps = { 
    title: <Header />, 
    theme: getMuiTheme(SnapbackTheme), 
    locale: 'en', 
    restClient, 
    authClient: AuthClient, 
    loginPage: LoginPage 
} 

let AppLayout = <Admin {...AdminProps } /> 

if (userRoleIs(USER_ROLE_1)) { 
    AppLayout = (
    <Admin {...AdminProps } dashboard={CustomDashboardForThisRole}> 
     <Resource name="resource1" list={resource1List} /> 
    </Admin> 
) 
} 

if (userRoleIs(USER_ROLE_2)) { 
    AppLayout = (
    <Admin {...AdminProps }> 
     <Resource name="resource1" list={resource1List} /> 
    </Admin> 
) 
} 

return AppLayout 

正如你所看到的,根據所記錄的我可以選擇哪些道具Admin應有的用戶。這是有用的,這樣的問題是,當你登錄一個用戶,並找出哪個角色,我沒有一個合適的方式來更新道具並重新渲染它。

與具有自定義的儀表板,直到我刷新頁面,管理員正確渲染正確的儀表盤爲用戶用戶登錄時會導致一個空的內容畫面。

我目前的醜陋解決方法:登錄成功時爲window.location.reload(),但您可以在一秒鐘內看到空的內容屏幕,看起來很糟糕。

我的問題是:是否有重新呈現從authClient的Admin部件的正確方法?

在此先感謝!

回答

1

推薦的方法是使用aor-permissions,它引入了<WithPermission><SwitchPermissions>組件。在Admin直接

import React from 'react'; 
import { SwitchPermissions, Permission } from 'aor-permissions'; 
import authClient from './authClient'; 

const Dashboard =() => (
    <SwitchPermissions authClient={authClient}> 
     <Permission value={USER_ROLE_1}> 
      <CustomDashboardForThisRole /> 
     </Permission> 
    </SwitchPermissions> 
); 

然後,導入此Dashboard組件:您可以使用後者來包裝需要在你的儀表板重新描繪的部分。

0

很多你的代碼中沒有顯示,所以它是一種很難規定具體solution.But讓我們假設你正在使用的反應+終極版存儲狀態(如果你使用的不是終極版,大部分的意見仍然可以)。

某處在你的國家,你將有一個關鍵adminInfo,與假初始值。在您的服務器上,將會有路由,您可以發佈用戶名和密碼,並且只要他們確定即可獲取管理員道具的內容或類似內容。

你的元件庫會從國家得到的數據,所以最初你會顯示組件acoording到adminInfo beeing假。當用戶輸入憑證時,您會向服務器發出ajax呼叫。當服務器響應管理員道具時,您需要在adminInfo下更新狀態,以便從服務器接收數據。當你更新狀態時,你的組件會重新渲染,現在找到完整的管理信息並相應地顯示

+0

謝謝大家,是的,但這就是admin-on-rest框架應該做的,我只是他們框架的另一個用戶,[他們說不是他們的問題,我應該在這裏發佈](https:// github.com/marmelab/admin-on-rest/issues/790#event-1136592651),跆拳道然後:/ –

+1

我看到,希望有人與管理員休息經驗將能夠幫助你。 –

+0

我們沒有說它不是我們的prb,只是我們只處理github中的錯誤。你能顯示包含你發佈的代碼的組件代碼嗎?我想這是某些東西的渲染方法的一部分? – Gildas

0

我有一個類似的要求,其中Admin元素下的菜單/資源應基於登錄的人來呈現。採取的措施是渲染WrapperApp,將Admin應用作爲孩子呈現。 WrapperApp連接到它自己的Redux Store/Actions/Router層,負責照顧我的應用程序的登錄/註銷行爲。根據誰登錄,Wrapper決定將要傳遞給Admin子元素的一組資源。現在,無論身份驗證令牌/ cookie何時到期,Admin authClient都會注意到該錯誤並調用WrapperApp的logout操作。這將重定向我WrapperApp到它的登錄頁面,並循環下去還基於誰在登錄該Admin子元素的authClient是意識到包裝的應用程序的行爲。如下所示:

<Admin ... authClient={authClient.withActions(wrapperActions)} .. /> 

withActions將我的包裝應用程序操作粘貼到AuthClient中。