Enfoque de implementación de ReactJS RBAC

Entrada

Hola querido lector!

Hace algún tiempo (hace aproximadamente un año), me enfrenté a la necesidad de renderizar condicionalmente componentes en ReactJS, dependiendo de los derechos de usuario actuales. Lo primero que comencé a buscar era soluciones preparadas y "mejores prácticas". El artículo " Autorización basada en roles en React " impresionó más con su uso de componentes de orden superior (HOC). Pero, desafortunadamente, no encontré una solución que me satisfaga.


En ese momento, estaba un poco familiarizado con react-redux-connect (módulo npm), y el enfoque de decoración utilizado en la función de conexión me enganchó mucho. Un análisis detallado del dispositivo de conexión se puede encontrar aquí .

Descripción de la solución

Primero debe determinar qué información mínima se necesita para tomar una decisión sobre la representación de un componente. Obviamente, para renderizar es necesario cumplir alguna condición (como opción, hay algún tipo de derecho, por ejemplo, el derecho de agregar un nuevo usuario). Llamamos a esta condición un requisito (o requisito en inglés). Para comprender si se ha cumplido el requisito, podemos basarnos en un conjunto de derechos de usuario actuales : credenciales . Es decir, es suficiente definir una función:

function isSatisfied(requirement, credentials) { if (...) { return false; } return true; } 

Ahora hemos decidido más o menos la condición de renderizado. ¿Cómo usarlo?

1. Podemos usar el enfoque de la frente:

 const requirement = {...}; class App extends Component { render() { const {credentials} = this.props; return isSatisfied(requirement, credentials) && <TargetComponent>; } } 

2. Podemos ir un poco más allá y envolver el componente objetivo en otro, que verificará el requisito:

 const requirement = {...}; class ProtectedTargetComponent extends Component { render() { const {credentials} = this.props; return ( isSatisfied(requirement, credentials) ? <TargetComponent {...this.props}> {this.props.children} </TargetComponent> : null ); } } class App extends Component { render() { const {credentials} = this.props; return <ProtectedTargetComponent/>; } } 

Escribir manualmente un contenedor para cada componente de destino es bastante triste. ¿Cómo podemos simplificar esto?

3. Podemos recurrir al mecanismo HOC (por analogía con connect desde "react-redux-connect"):

 function protect(requirement, WrappedComponent) { return class extends Component { render() { const { credentials } = this.props; return ( isSatisfied(requirement, credentials) ? <WrappedComponent {...this.props}> {this.props.children} </WrappedComponent> : null ); } } } ... const requireAdmin = {...}; const AdminButton = protect(requireAdmin, Button); ... class App extends Component { render() { const {credentials} = this.props; return ( ... <AdminButton credentials={credentials}> Add user </AdminButton> ... ); } } 

Ya es mejor, pero sigue siendo miserable: debe lanzar manualmente las credenciales a través de todo el árbol de componentes. ¿Qué se puede hacer con esto? Es lógico suponer que las credenciales del usuario actual son un objeto global para toda la aplicación. Entonces otra vez react-redux-connect viene al rescate. Después de leer un artículo sobre el dispositivo de este módulo, encontramos que utiliza algunos contextos ReactJS.

4. Usando el mecanismo de contexto, obtenemos el enfoque final:

 const { Provider, Consumer } = React.createContext(); function protect(requirement, WrappedComponent) { return class extends Component { render() { return ( <Consumer> { credentials => isSatisfied(requirement, credentials) ? <WrappedComponent {...this.props}> {this.props.children} </WrappedComponent> : null } </Consumer> ); } } } ... const requireAdmin = {...}; const AdminButton = protect(requireAdmin, Button); ... class App extends Component { render() { const { credentials } = this.props; return ( <Provider value={credentials}> ... <AdminButton> Add user </AdminButton> ... </Provider> ); } } 

Epílogo

Fue una breve digresión sobre la idea misma. En base a esta idea, se implementó un módulo ( github , npm ), que proporciona características más interesantes y es más fácil de incrustar (vea README.md en el github y la demostración usando el módulo).

Solo por alguna razón no pude obtener el paquete npm creado en la demostración, así que tuve que insertar el código del módulo allí. Pero el módulo instalado a través de npm install react-rbac-guard funciona localmente (Chrome 69.0.3497.100). Sospecho que el problema está en el método de compilación: acabo de copiar los archivos package.json y webpack.config.prod.js de un módulo con un propósito similar.

Como no soy un desarrollador front-end, todavía hay mucho trabajo sin terminar (falta de pruebas, inoperancia en https://codesandbox.io y, posiblemente, otros puntos perdidos). Por lo tanto, si hay comentarios, sugerencias o solicitudes de extracción, ¡bienvenido!

PPS: Todos los comentarios relacionados con la ortografía, incluso en README.md, envíe mensajes personales o en forma de solicitud de extracción.