Gestion des autorisations des utilisateurs dans JavaScript

Le développement d'une application Web robuste implique souvent la gestion des autorisations des utilisateurs. Cet article montre une méthode propre et efficace pour gérer les autorisations des utilisateurs dans le frontal, quel que soit le cadre choisi (React, Vue ou JavaScript simple). Nous supposerons un backend API RESTful, mais le modèle s'adapte à d'autres architectures.

Prenons une application de gestionnaire de documents avec des rôles comme Admin (Access complet), éditeur (créer, voir, modifier) ​​et invité (voir uniquement). Le backend doit fournir des informations sur le rôle de l'utilisateur. Pour cet exemple, la réponse API peut inclure une propriété accessLevel :

 {
  ID: 1,
  Titre: "Mon premier document",
  Auteur: 742,
  accesstevel: "admin",
  contenu: {...}
}

Surtout, le frontend ne devrait pas être le seul arbitre des autorisations; La validation backend est essentielle pour empêcher un accès non autorisé.

Établir des constantes

Pour plus de clarté et de maintenabilité, définissez les constantes pour les actions et les rôles dans un fichier séparé (par exemple, constants.js ):

 const actions = {
  Modify_file: "Modify_file",
  View_file: "View_file",
  Delete_file: "Delete_file",
  Create_file: "create_file"
};

const Roles = {
  Admin: "Admin",
  Éditeur: "éditeur",
  Invité: "invité"
};

export {actions, rôles};

L'utilisation de TypeScript Enum améliorerait la sécurité du type. Ces constantes proposent:

• Source unique de vérité: visualisez facilement toutes les actions et rôles.
• Type Sécurité: empêche les fautes de frappe et améliore la lisibilité du code.
• Documentation améliorée: simplifie la compréhension des membres de l'équipe.

Définition des mappages d'autorisation

Créez un fichier (par exemple, permissions.js ) pour mapper des actions à des rôles:

 import {actions, rôles} de "./constants.js";

const mappings = new map ();

mappings.set (action.modify_file, [rôles.admin, rôles.editor]);
mappings.set (action.view_file, [rôles.admin, rôles.editor, rôles.Guest]);
mappings.set (action.delete_file, [rôles.admin]);
mappings.set (action.create_file, [rôles.admin, rôles.editor]);

Exporter les mappages par défaut;

Cette Map fournit:

• Gestion centralisée: modifiez facilement les autorisations.
• Testabilité: simple à tester avec des tests d'instantané.
• Limibilité: aperçu clair des autorisations.

Implémentation de vérifications d'autorisation dans l'interface utilisateur

Supposons que vous ayez un composant React rendant un menu déroulant:

 Importer l'haspermission de "./permissions.js";
import {actions} de "./constants.js";

Fonction Dropdown ({fichier}) {
  retour (
    

{haspermission (fichier, actions.view_file) &&
• Rafraîchir
} {haspermission (fichier, action.modify_file) &&
• Rebaptiser
} {haspermission (fichier, action.create_file) &&
• Double
} {haspermission (fichier, action.delete_file) &&
• Supprimer
}

)); }

Cela utilise une fonction d'assistance hasPermission (expliquée ci-dessous) pour rendre conditionnellement les éléments de menu en fonction des autorisations utilisateur.

La fonction hasPermission

Cette fonction vérifie si un utilisateur a l'autorisation requise:

 mappages d'importation de "./permissions.js";

Fonction Haspermission (fichier, action) {
  if (! file? .AccessSlevel) renvoie false;
  return mappings.has (action) && mappings.get (action) .includes (file.accesslevel);
}

Exporter le haspermission par défaut;

Cela vérifie de manière concise les mappings de l'action donnée et si le accessLevel de l'utilisateur est inclus.

Étendre le motif

Ce modèle évolue vers des scénarios plus complexes. Par exemple, l'ajout de vérifications de licence:

 // ... (constantes de licences) ...

const licensemAppings = new Map ();
// ... (Carte les actions des licences) ...

fonction haslicense (utilisateur, action) {
  // ... (Logic pour vérifier la licence) ...
}

fonction hasaccess (fichier, utilisateur, action) {
  return haspermission (fichier, action) && Haslicense (utilisateur, action);
}

Ou gérer différents types de fichiers:

 const tyMAppings = new Map ();
// ... (Carte Actions aux types de fichiers et licences) ...

fonction hastypepermission (fichier, utilisateur, action) {
  // ... (logique pour vérifier les autorisations de type de fichier) ...
}

Cela permet un contrôle granulaire sur les autorisations. Les tests doivent être complets, y compris les tests d'instantané pour les mappages et les tests unitaires pour les fonctions d'autorisation. Un exemple complet utilisant React and Testing est disponible sur les codes et boîte . N'oubliez pas que la validation du backend reste cruciale.

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!