React Reduxでのネストされたロールとアクセス権の使用

Question

私の質問は、ユーザーがネストされたロールと権限のセットを持っているかもしれないアプリケーションのReactアプリケーションのロールリストをどのように取得しているかです。ログイン時にユーザーの権限リスト/ツリー全体を送信してから、それを隠してその後に反復できるようにしていますか？

たとえば、ユーザーが役割1にあり、役割1に権限のセットが含まれているとしますが、複数の役割にまたがっている場合や役割内にさらに役割がある場合もあります。あなたは基本的にそのリストを手に入れて還元店に保管していますか？

だから、2つの質問：

1）とどのようにロールのリストを取得している&権限（、彼らは、ログインするときに、権限のエンドポイント、呼び出しているか、それが戻って来ていますか？彼らがログインしたときのセッション応答のペイロード内にあるか？）

2）どのようにしてそのリストを格納して反復していますか？

は、私は、人々がどのように思ったんだけどよう、ユーザーのために特定の役割に基づいて何でもこのように表示/非表示、非表示、ボタンを削除するよう/ショーのようなリストでUI側の&許可を行うために必要なものがありますこれを行う。

あなたがヒットしたバックエンドAPIは、ユーザーがどんなhttp動詞も実行できることをチェックしますが、私がここで言及しているものではありません。ユーザーの動作/ UIコンポーネントを処理するUI側のロールをトラバースして確認します動作。ユーザーがまたはバックエンドのREST APIにAPI呼び出しで成功することはできません場合はそのいくつかは見つけることによって処理することができるが、それはあなたが役割の複雑なセットを持っている場合、あなたはまだそのリストを持っている必要があり、この超えてはるかに行きますユーザが例えばコンポーネント上に着陸したときに何らかの前向きな振る舞いをするために、

Answer 1

可能な複数のロールから既にマージされたアクセス許可を、サーバー側で作成します。構造は次のようになります：

{ 
    "posts": ["add", "view"], 
    "comments": ["add", "view", "delete", "change"] 
} 

あなたのアプリのデザインに依存しません。ログインへの応答は完全に意味があります。要点は、コンポーネントが必要とする前にデータを利用できることです。次に、これらの権限をreduxストアに保存し、関連するコンポーネントを接続します。 like：

const Comments = ({comments, hasDeletePermission, hasChangePermissions}) => { 
    <ul> 
    {comments.map(comment => (
     <li> 
     <p>{comment}</p>  
     {hasChangePermission && <button>change</button>} 
     {hasDeletePermission && <button>delete</button>} 
     </li> 
    ))} 
    </ul> 
}; 

const mapStateToProps = (state, ownProps) => ({ 
    hasDeletePermission: state.user.permissions['comments'].includes('delete'), 
    hasChangePermissions: state.user.permissions['comments'].includes('change'), 
}); 

export default connect(mapStateToProps)(Comments); 

匿名ユーザーの既定のアクセス許可値を設定することもできます。