ホームページ  >  記事  >  ウェブフロントエンド  >  useRoleManagement フックを使用した異なる環境での動的ロール名の処理 (パート 2)

useRoleManagement フックを使用した異なる環境での動的ロール名の処理 (パート 2)

WBOY
WBOYオリジナル
2024-09-03 15:00:561079ブラウズ

Handling Dynamic Role Names in Different Environments with useRoleManagement Hook (Part 2)

このシリーズの最初の部分では、useRoleManagement フックを使用して React にロールベースのアクセス制御を実装する基礎について説明しました。まだ読んでいない方は、こちらから読んでみてください
React でのロールベースのアクセス制御の実装: useRoleManagement フックの詳細。

この 2 番目のパートでは、ステージングや実稼働など、さまざまな環境に応じた動的なロール名の管理について詳しく説明します。これは、開発のさまざまな段階にわたって一貫性のある安全なロール管理を維持するために非常に重要です。

概要

アプリケーションを開発する場合、環境ごとに異なるロール名や権限構成を使用するのが一般的です。たとえば、開発ではテストまたはモックのロール名を使用し、実稼働環境では実稼働対応の実際のロール名を使用することができます。これらの動的なロール名を正しく処理すると、アプリケーションがライフサイクルのさまざまな段階にわたって一貫して安全に動作することが保証されます。

環境固有のロール構成

ロール名を動的に管理するには、環境変数を利用できます。これらの変数を使用すると、環境ごとに異なるロール キーを定義でき、これを使用して適切な権限設定を読み込むことができます。

これを実現する方法は次のとおりです:

1.環境変数を定義する

.env.development ファイルと .env.production ファイルで、各環境のロール キーを指定します。例:

  • .env.development
VITE_ROLE_KEYS_MANAGER=Manager_Test
VITE_ROLE_KEYS_USER=USER_Test
VITE_ROLE_KEYS_ADMIN=Admin_Test
  • .env.production
VITE_ROLE_KEYS_MANAGER=Prod_Manager
VITE_ROLE_KEYS_USER=Prod_USER
VITE_ROLE_KEYS_ADMIN=Prod_Admin

この設定により、アプリケーションは実行環境に応じて適切なロール名を使用するようになります。

2.権限オブジェクト

を更新します

これらの環境変数を使用して、アクセス許可オブジェクトを動的に定義します。権限オブジェクトは、役割キーを各役割の特定の権限にマップします:

const permissions: Record<string, UserPermissions> = {
  [import.meta.env.VITE_ROLE_KEYS_MANAGER]: {
    partners: { add: false, view: false, edit: false, deleteRow: true },
    // ... other permissions
  },
  [import.meta.env.VITE_ROLE_KEYS_USER]: {
    partners: { add: false, view: false, edit: false, deleteRow: false },
    // ... other permissions
  },

  [import.meta.env.VITE_ROLE_KEYS_ADMIN]: {
    partners: { add: true, view: true, edit: true, deleteRow: true },
    // ... other permissions
  },
};

import.meta.env 構文を使用すると、.env ファイルで定義された環境変数にアクセスできます。

3. useRoleManagement フックを使用します

このシリーズの最初の部分では、useRoleManagement フックを使用した React のロールベースのアクセス制御の基礎について説明しました。まだお読みでない場合は、こちらからご覧ください。

useRoleManagement フックは、デコードされた JWT トークンからユーザー ロールを抽出し、環境固有のロール キーを使用してそれらをアクセス許可にマップし、関連するアクセス許可を返します。

export function useRoleManagement() {
  const { pathname } = useLocation();

  const token = localStorage.getItem('token');

  let decodedToken: Realm | null = null;

  try {
    if (token) {
      decodedToken = jwtDecode<Realm>(token);
    }
  } catch (error) {
    console.error('Invalid token:', error);
  }

  const roles = decodedToken?.realm_access?.roles ?? [];

  const roleExists = ifRoleExists(roles);

  const rolePermissions = getPermissions(
    roleExists,
    pathname !== '/' ? pathname : '/partners',
  );

  if (!rolePermissions) {
    return {};
  }

  const {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  } = rolePermissions as Permissions;

  return {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  };
}

結論

環境変数を通じてロール名を動的に管理することにより、アプリケーションのロールベースのアクセス制御が異なる環境間でも一貫して動作することを保証できます。このアプローチは柔軟性を提供し、開発構成と運用構成の間の明確な分離を維持するのに役立ちます。

以上がuseRoleManagement フックを使用した異なる環境での動的ロール名の処理 (パート 2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。