Implementieren Sie clientseitige ReactJS-Berechtigungen oder brechen Sie Apps in mehrere Dateien auf?

Question

TL; DR: Zugriff über clientseitige Berechtigungen beschränken oder Apps in separate Dateien aufteilen und den Zugriff auf jede Datei beschränken?

---

Ich verwende ReactJS (mit React Router, etc.), um viele kleine clientseitige Anwendungen zu erstellen. Sie werden von den Arbeitern im Feld benutzt, ohne viel zwischen ihnen zu wechseln.

Ich benutze Symfony2 als Back-End. Ich habe hier bereits Berechtigungen für Server-gerenderte Apps/Seiten eingerichtet.

Bisher haben alle meine Benutzer (von React apps) die gleichen Berechtigungen benötigt, also habe ich nur den Zugriff auf die Seite eingeschränkt, die die Hauptdatei app.js (und auch die API von Kurs). Aber jetzt muss ich in der Lage sein, einige dieser Apps von bestimmten Benutzern zu verstecken. Ich habe zwei Möglichkeiten, wie ich es sehe:

1. ein clientseitige Berechtigungssystem implementieren, die dem Symfony2 serverseitige Ansatz
2. Split ergänzt meine apps Reagieren in getrennte gebündelte Dateien und dient nur die entsprechenden Seiten zu die richtigen Berechtigungen Inhaber

Option 1 würden viel Komplexität in das Projekt ein, und ich habe keine Ahnung, wie ich einmal anfangen würde, wie es in der Art von Tutorials gibt nicht viel. (Obwohl es unwahrscheinlich ist, ist es übrigens egal, ob Benutzer den clientseitigen Code inspizieren und in die geschützten Bereiche einbrechen, da die zugrunde liegenden Daten über die API geschützt sind.) Aber es würde eine einzige Code-Basis und besser bedeuten Caching, da der gesamte Herstellercode wie React selbst nur einmal heruntergeladen würde.

Option 2 würde bedeuten, dass ich es vermeiden könnte, ein clientseitiges Berechtigungssystem zu erstellen, es würde jede App einfacher machen und sich nahtlos in mein existierendes serverseitiges Berechtigungssystem einfügen. Es wäre jedoch viel weniger flexibel und würde bedeuten, den gleichen Herstellercode aufgrund vieler Dateien mehrmals zu bedienen.

Welchen Ansatz sollte ich wählen?

Answer 1

In Bezug auf Ihre Kommentare besteht eine einfache Lösung darin, eine Komponente basierend auf ihrer Berechtigungsebene anzuzeigen/nicht zu zeigen, eine Komponente zu erstellen.

... 

let DumbPermissionLevel = ({userLevel, levelRequired, children}) => { 
    if (userLevel < levelRequired) 
     return null; 
    return children; 
}; 

let PermissionLevel = connect(
    (state) => ({ 
     userLevel: state.user.permissionLevel // Wherever your user permission level is stocked in your state 
    }) 
)(DumbPermissionLevel); 

... 

Sie können dann wie folgt verwenden es einfach:

const LARVA = 0; 
const MODERATOR = 1; 
const ADMIN = 2; 
... 
<p>Everybody will see this.</p> 

<PermissionLevel levelRequired={MODERATOR}> 
    <p>Only moderators and admin will see this !</p> 
</PermissionLevel> 

<PermissionLevel levelRequired={ADMIN}> 
    <p>Only admins will see this !</p> 
</PermissionLevel> 

Natürlich bedeutet dies, dass Sie Ihre Benutzerberechtigungsstufe von Back-End-Server auf den Client-Code übertragen.
Werfen Sie einen Blick auf das zweite Argument dafür createStore().