Gestion des noms de rôle dynamiques dans différents environnements avec useRoleManagement Hook (Partie 2)

Dans la première partie de cette série, nous avons exploré les bases de la mise en œuvre du contrôle d'accès basé sur les rôles dans React à l'aide du hook useRoleManagement. Si vous ne l'avez pas encore lu, vous pouvez le consulter ici
Implémentation du contrôle d'accès basé sur les rôles dans React : une plongée approfondie dans useRoleManagement Hook.

Dans cette deuxième partie, nous approfondirons la gestion des noms de rôles dynamiques en fonction de différents environnements, tels que la préparation et la production. Ceci est crucial pour maintenir une gestion des rôles cohérente et sécurisée à travers les différentes étapes de développement.

Aperçu

Lors du développement d'applications, il est courant d'avoir différents noms de rôles ou configurations d'autorisations pour différents environnements. Par exemple, vous pouvez utiliser des noms de rôles de test ou fictifs dans le développement et des noms de rôles réels prêts pour la production dans l'environnement de production. La gestion correcte de ces noms de rôles dynamiques garantit que votre application se comporte de manière cohérente et sécurisée à différentes étapes de son cycle de vie.

Configuration des rôles spécifiques à l'environnement

Pour gérer les noms de rôles de manière dynamique, nous pouvons exploiter les variables d'environnement. Ces variables nous permettent de définir différentes clés de rôle pour différents environnements, qui peuvent ensuite être utilisées pour charger la configuration des autorisations appropriée.

Voici comment nous pouvons y parvenir :

1. Définir les variables d'environnement

Dans vos fichiers .env.development et .env.production, spécifiez les clés de rôle pour chaque environnement. Par exemple :

• .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

Cette configuration garantit que votre application utilise des noms de rôle appropriés en fonction de l'environnement dans lequel elle s'exécute.

2. Mettre à jour les autorisations Objet

Utilisez ces variables d'environnement pour définir l'objet d'autorisations de manière dynamique. L'objet autorisations mappe les clés de rôle à des autorisations spécifiques pour chaque rôle :

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
  },
};

La syntaxe import.meta.env vous permet d'accéder aux variables d'environnement définies dans vos fichiers .env.

3. Utilisez le useRoleManagement Hook

Dans la première partie de cette série, nous avons exploré les fondements du contrôle d'accès basé sur les rôles dans React à l'aide du hook useRoleManagement. Si vous ne l'avez pas encore lu, vous pouvez le consulter ici.

Le hook useRoleManagement extrait les rôles d'utilisateur du jeton JWT décodé, les mappe aux autorisations à l'aide des clés de rôle spécifiques à l'environnement, puis renvoie les autorisations pertinentes :

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,
  };
}

Conclusion

En gérant dynamiquement les noms de rôles via des variables d'environnement, vous pouvez garantir que le contrôle d'accès basé sur les rôles de votre application se comporte de manière cohérente dans différents environnements. Cette approche offre de la flexibilité et permet de maintenir une séparation claire entre les configurations de développement et de production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!