web-dev-qa-db-ja.com

React Reduxアプリでロールベースの制限/アクセス許可を実装する方法

私は複数のコンポーネントを含むReact-Redux-koajsアプリケーションを持っています。私もユーザーの役割もほとんどありません。今、私は特定の役割のみを特定の役割に隠し、他の人からのものを隠すボタン、テーブルとDIVをいくつか表示したいです。コンポーネント全体を非表示にしたくないが、コンポーネントの一部だけを隠したくないことを忘れないでください。誰かが助けてくれることができますか？前もって感謝します。

reactjsreact-reduxuser-permissionsrole-based-access-control
6
Harshit Agarwal

だから、私はフロントエンド上の役割ベースのアクセス（RBAC）を実装するための代替と簡単な方法があると考えました。

Redux Storeの状態で、権限と呼ばれるオブジェクトを作成します（または、好きなものは何でも関連付けることができます）。

const InitialState = {
  permissions: {}
};
 _

その後、ログインアクションで、次のように指定したい権限を設定します。

InitialState['permissions'] ={
  canViewProfile: (role!=='visitor'),
  canDeleteUser: (role === 'coordinator' || role === 'admin')
  // Add more permissions as you like
}
 _

あなたが訪問者ではない場合、あなたはプロフィールを見ることができるという最初の許可を言っています。 2回目の許可には、管理者またはコーディネーターの場合にのみユーザーを削除できると言っています。そして、これらの変数は、ログインしているユーザーの役割に基づいて、TRUEまたはFALSEのいずれかを保持します。そのため、店舗の状態では、uは権限を表すキーを持つ権限オブジェクトを持ち、その値はあなたの役割が何であるかに基づいて決定されます。

その後、コンポーネントでは、権限オブジェクトを取得するためにストア状態を使用します。次のように接続してこれを行うことができます。

const mapStateToProps = (state) => {
  permissions : state.permissions
}
 _

次に、次のようなコンポーネントにこれらの小文字を接続してください。

export default connect(mapStateToProps,null)(ComponentName);
 _

その後、このように条件付きで表示したい特定の要素で、これらの小道具を使用することができます。

{(this.props.permissions.canDeleteUser) && <button onClick={this.deleteUser}>Delete User</button>}
 _

上記のコードでは、ユーザーの削除アクセス許可がある場合にのみ、[ユーザーの削除]ボタンがレンダリングされていることを確認します。

それはそれだけで、あなたは役割ベースのアクセスを適用しました。一箇所での役割に応じてすべての埋め込みを持つことができるため、簡単にスケーラブルで変更できますので、このアプローチを使用できます。

お役に立てれば！私が何かを逃したならば、コメントの中で私を助けてください。 :-)

1
Harshit Agarwal

これにこれを実装しました RBAC-React-redux-aspnetcoreリポジトリ 。誰かがコンテキストAPIでReduxを使用したい場合は、下のコードスニペットが役立ちます。

export const SecuedLink = ({ resource, text, url }) => {

  const userContext = useSelector(state => {
    return state.userContext;
  });    

  const isAllowed = checkPermission(resource, userContext);
  const isDisabled = checkIsDisabled(resource, userContext);

  return (isAllowed && <Link className={isDisabled ? "disable-control" : ""} to={() => url}>{text}</Link>)
}


const getElement = (resource, userContext) => {
    return userContext.resources
        && userContext.resources.length > 0
        && userContext.resources.find(element => element.name === resource);
}

export const checkPermission = (resource, userContext) => {
    const element = getElement(resource, userContext);
    return userContext.isAuthenticated && element != null && element.isAllowed;
}

export const checkIsDisabled = (resource, userContext) => {
    const element = getElement(resource, userContext);
    return userContext.isAuthenticated && element != null && element.isDisabled;
}
 _

上記のスニペットを使用するには、以下のように使用できます

  <SecuedLink resource='link-post-edit' url={`/post-edit/${post.id}`} text='Edit'></SecuedLink>
  <SecuedLink resource='link-post-delete' url={`/post-delete/${post.id}`} text='Delete'></SecuedLink>
 _

そのため、役割によっては、要素を表示/非表示にするだけでなく、それらを有効/無効にすることもできます。許可管理はReact-Clientから完全に切り離され、データベースで管理されているため、新しい役割と新しい権限をサポートするためだけにコードを再度展開する必要があります。

0
Foyzul Karim