Réagir: comment afficher en toute sécurité un composant en fonction du rôle de l'utilisateur


Sylvain Laugier

J'essaie d'afficher un tableau de bord d'administration dans reactet Meteoruniquement si l'utilisateur actuel est un administrateur .

J'appelle une méthode serveur qui vérifie l'autorisation de l'utilisateur et rend le composant d'administration uniquement si cette méthode retourne true.

Cet appel au serveur est asynchrone et donc le composant ne rend pas, généralement je gère cet appel asynchrone avec l'état, mais je ne veux pas exposer quoi que ce soit dans l'état ici (je n'aimerais pas que quelqu'un change l'état et accède au tableau de bord d'administration) .

Voici le code:

export default class AdminChecker extends Component {
  isItAdmin() {
    // Get the id of current user
    const userId = Meteor.userId();
    if (userId) {
      // call a server method which returns true if current user is Admin
      Meteor.call('checkAdminId', userId, (err, authorized) => {
        if (err) {
          console.log(err);
          return null;
        }
        return (authorized) ? <AdminDashboard /> : null;
      });
    }
  }
  render() {
    return (
      <div className="admin-temp-container">
        {this.isItAdmin()}
      </div>
    );
  }
}

Je pense que je peux avoir cette logique dans un composant parent et envoyer le résultat de isItAdminà adminDashboardcomme accessoire (le adminDashboardcomposant afficherait des informations uniquement si ses accessoires le sont true).

Mais je suis sûr que c'est sûr. Pourrait-on changer les accessoires avec les outils de développement Chrome React ou quelque chose du genre?

Merci beaucoup

John Turn

Je pense qu'il y a deux parties à cela (et les commentaires font allusion aux deux):

Tout d'abord, vous ne devez pas vous attendre à pouvoir appliquer la sécurité sur le client. Vous devez implémenter une logique de contrôle d'accès sur le serveur (c'est-à-dire que toute API qui exécute une action d'administration doit vérifier que l'utilisateur exécutant l'action est un administrateur).

Une fois que vous avez fait cela (et peut-être que vous l'avez déjà fait), vous devrez probablement utiliser des accessoires ou un état pour stocker si l'utilisateur est ou non un administrateur (tout comme vous stockeriez toute autre donnée dans votre application).

Le point clé est qu'une fois que vous avez appliqué la sécurité sur le serveur, peu importe si un utilisateur manipule l'état pour accéder au tableau de bord d'administration: le serveur ne permettra pas à l'utilisateur de visualiser des données réelles ou de prendre des mesures de toute façon.

Cela n'a aucun rapport avec le rendu côté serveur. Vous pouvez très certainement créer un tableau de bord d'administration sécurisé sans rendu côté serveur, tant que les API utilisées pour récupérer les données d'administration et effectuer des actions d'administration implémentent leurs propres contrôles de contrôle d'accès.

Articles connexes


Comment convertir un composant de classe en fonction ? (Réagir)

Jake Castillo J'essaie d'utiliser des crochets dans cette fonction, mais je dois d'abord convertir ce composant de classe en fonction. J'ai du mal à comprendre comment les méthodes de rendu et les constructeurs fonctionnent dans les fonctions et j'aurais besoi