使用 useRoleManagement Hook 處理不同環境中的動態角色名稱（第 2 部分）

在本系列的第一部分中，我們探索了使用 useRoleManagement 鉤子在 React 中實現基於角色的存取控制的基礎。如果你還沒讀過，可以在這裡查看
在 React 中實現基於角色的存取控制：深入探討 useRoleManagement Hook。

在第二部分中，我們將根據不同的環境（例如登台和生產）更深入地管理動態角色名稱。這對於在各個開發階段保持一致且安全的角色管理至關重要。

概述

在開發應用程式時，針對不同環境有不同的角色名稱或權限配置是很常見的。例如，您可以在開發中使用測試或模擬角色名稱，在生產環境中使用真實的生產就緒角色名稱。正確處理這些動態角色名稱可確保您的應用程式在其生命週期的不同階段一致且安全地運作。

環境特定的角色配置

為了動態管理角色名稱，我們可以利用環境變數。這些變數允許我們為不同的環境定義不同的角色金鑰，然後可以使用它們來載入適當的權限配置。

我們如何實現這個目標：

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.生產

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 Hook 處理不同環境中的動態角色名稱（第 2 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！