Umgang mit Benutzerberechtigungen in JavaScript

Die Entwicklung einer robusten Webanwendung umfasst häufig die Verwaltung von Benutzerberechtigungen. Dieser Artikel zeigt eine saubere und effiziente Methode zum Umgang mit Benutzerberechtigungen im Front-End, unabhängig von Ihrem ausgewählten Framework (React, Vue oder Plain JavaScript). Wir werden ein erholsames API -Backend annehmen, aber das Muster passt an andere Architekturen.

Betrachten wir eine Dokumentenmanager -Anwendung mit Rollen wie Admin (Full Access), Editor (erstellen, ansehen, bearbeiten) und Gast (nur anzeigen). Das Backend sollte Benutzerrolleninformationen bereitstellen. In diesem Beispiel kann die API -Antwort eine accessLevel -Eigenschaft enthalten:

 {
  ID: 1,
  Titel: "Mein erstes Dokument",
  Authorid: 742,
  Zugriffslevel: "admin",
  Inhalt: {...}
}

Entscheidend ist, dass der Frontend nicht der alleinige Schiedsrichter der Berechtigungen sein sollte. Die Backend -Validierung ist unerlässlich, um einen unbefugten Zugang zu verhindern.

Konstanten aufbauen

Definieren Sie für Klarheit und Wartbarkeit Konstanten für Aktionen und Rollen in einer separaten Datei (z. B. constants.js ):

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

const rollen = {
  Admin: "admin",
  Herausgeber: "Editor",
  Gast: "Gast"
};

exportieren {Aktionen, Rollen};

Die Verwendung von Typscript Enums würde die Sicherheitstypsicherheit verbessern. Diese Konstanten bieten an:

• Einzelne Quelle der Wahrheit: Sehen Sie sich alle Aktionen und Rollen leicht an.
• Geben Sie Sicherheit ein: verhindert Tippfehler und verbessert die Code -Lesbarkeit.
• Verbesserte Dokumentation: Vereinfacht das Verständnis für Teammitglieder.

Definieren von Genehmigungsabbördern

Erstellen Sie eine Datei (z. B. permissions.js ), um Aktionen in Rollen zuzuordnen:

 Import {Aktionen, Rollen} aus "./constants.js";

const mappings = new map ();

mappings.set (actions.modify_file, [rollen.admin, roles.editor]);
mappings.set (actions.view_file, [rollen.admin, rollen.editor, roles.guest]);
mappings.set (actions.delete_file, [rollen.admin]);
mappings.set (actions.create_file, [rollen.admin, roles.editor]);

Ausfassungsverhältnisse ausfindig;

Diese Map enthält:

• Zentrales Management: Berechtigte leicht zu ändern.
• Testbarkeit: Einfach zu testen mit Snapshot -Tests.
• Lesbarkeit: Klarer Überblick über Berechtigungen.

Implementierung von Erlaubnisprüfungen in der Benutzeroberfläche

Angenommen, Sie haben eine React -Komponente, die ein Dropdown -Menü rendert:

 HaSermission von "./permissions.js";
{Aktionen} aus "./constants.js";

Funktion Dropdown ({Datei}) {
  zurückkehren (
    

{HaSermission (Datei, Aktionen.view_file) &&
• Aktualisieren
} {HaSermission (Datei, Aktionen.modify_file) &&
• Umbenennen
} {HaSermission (Datei, Aktionen.Create_file) &&
• Duplikat
} {HaSermission (Datei, Aktionen.Delete_file) &&
• Löschen
}

); }

Dies verwendet eine hasPermission -Helferfunktion (unten erläutert), um Menüelemente basierend auf den Benutzerberechtigungen bedingt zu rendern.

Die hasPermission -Funktion

Diese Funktion prüft, ob ein Benutzer über die erforderliche Berechtigung verfügt:

 Mappings von "./permissions.js" importieren;

Funktion HaSermission (Datei, Aktion) {
  if (! file? .Accesslevel) return false;
  return mappings.has (action) && mappings.get (Aktion) .Includes (Datei.Accesslevel);
}

Ausfassungsvermittlung ausführen;

Dies überprüft die mappings für die angegebene Aktion und ob der accessLevel des Benutzers enthalten ist.

Das Muster erweitern

Dieses Muster skaliert komplexere Szenarien. Zum Beispiel Hinzufügen von Lizenzprüfungen:

 // ... (Konstanten für Lizenzen) ...

const licensemappings = new map ();
// ... (Kartenaktionen zu Lizenzen) ...

Funktion haslicense (Benutzer, Aktion) {
  // ... (Logik, um die Lizenz zu überprüfen) ...
}

Funktion hat Access (Datei, Benutzer, Aktion) {
  Rückgabe von HaSermission (Datei, Aktion) && Haslicense (Benutzer, Aktion);
}

Oder mit verschiedenen Dateitypen umgehen:

 const typemappings = new map ();
// ... (Kartenaktionen zu Dateitypen und -lizenzen) ...

Funktion HastypePermission (Datei, Benutzer, Aktion) {
  // ... (Logik, um Dateitypberechtigungen zu überprüfen) ...
}

Dies ermöglicht eine körnige Kontrolle über Berechtigungen. Die Tests sollten umfassend sein, einschließlich Snapshot -Tests für Zuordnungen und Unit -Tests für Berechtigungsfunktionen. Ein vollständiges Beispiel mit React und Tests finden Sie in CodesAndbox . Denken Sie daran, die Backend -Validierung bleibt entscheidend.

Das obige ist der detaillierte Inhalt vonUmgang mit Benutzerberechtigungen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!