休憩中の管理者：正しいログインが発生したときに管理コンポーネントを再レンダリングする必要があります。

Question

特定の役割と権限を持つユーザーと作業しています。この役割のうちの2つは独自のダッシュボードですが、それ以外の役割はありません。だから、基本的に私は私の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が持つべき小道具を選択できますログインしているユーザーに依存し、見ることができるように。これはうまく機能していますが、これは、ユーザーとログインしてどのロールがあるかを調べると、Admin小道具を更新して再レンダリングする適切な方法がないことがわかります。

カスタムダッシュボードを持つユーザーでログインすると、ページを更新して管理者が正しいダッシュボードで正しくレンダリングするまで空のコンテンツ画面が表示されます。

現時点では私の醜い回避策：window.location.reload()ログインに成功しましたが、空のコンテンツ画面が1秒間表示され、ひどいです。

私の質問は：AdminコンポーネントをauthClientから再レンダリングする適切な方法はありますか？

ありがとうございます！

Answer 1

aor-permissionsを使用することをお勧めします。<WithPermission>と<SwitchPermissions>のコンポーネントが導入されています。あなたのダッシュボードに再レンダリング必要な部品をラップするために、後者を使用することができます。

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> 
); 

その後、直接あなたのAdminにこのDashboardコンポーネントをインポートします。

Answer 2

あなたのコードの多くは表示されていないので、特定のソリューションを処方するのは難しいです。しかし、あなたはreact + reduxを使って状態を保存していると仮定しましょう（あなたがreduxを使用していない場合、まだ保持するだろう）。

あなたの州のどこかに、adminInfoキーがあり、初期値はfalseです。あなたのサーバーには、ユーザー名とパスワードを投稿できるルートがあります。管理用の小道具などのコンテンツを入手することができれば、提供されます。

あなたのコンポーネントは状態からデータを取得します。最初は、adminInfoのコンポーネントをfalseとして表示します。ユーザーが資格情報を入力すると、サーバーにajax呼び出しを発行します。サーバーが管理小道具で応答すると、adminInfoの下の状態を更新して、サーバーからデータを受け取るようにします。状態を更新すると、コンポーネントが再レンダリングされ、管理者情報を完全に検索して表示します。

Answer 3

私は、Admin要素のメニュー/リソースを誰がログインしているかに基づいてレンダリングする必要があります。子どもとしてAdminアプリをレンダリングするWrapperAppをレンダリングすることです。 WrapperAppは、自分のアプリケーションのログイン/ログアウト動作を処理する独自のThin Redux Store/Actions/Routerレイヤーに接続します。誰がログインしているかに基づいて、Wrapperは、Admin子要素に渡されるリソースのセットを決定します。現在、認証トークン/クッキーの有効期限が切れるたびに、Admin authClientはエラーに気付き、WrapperAppのlogoutアクションを呼び出します。これにより私のWrapperAppがログインページにリダイレクトされ、ログインした人に基づいてサイクルがさらに続きます。Admin子要素のauthClientは、ラッパーアプリのアクションを認識します。以下のように：AuthClientに

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

withActionsカレー私のラッパーのアプリアクション。