Llegué a la biblioteca CASL JavaScript, que restringe a qué recursos puede acceder un cliente determinado.

Mi pregunta es si se puede usar para el acceso basado en roles en una aplicación React de forma segura.

¿Y si el usuario puede alterar el permiso y obtener acceso no autorizado si se usa solo en la interfaz para mostrar/ocultar componentes como se muestra en el siguiente código de reacción?

 import React, { useContext } from 'react'; import { AbilityContext } from './Can' export default () => { const createTodo = () => { /* logic to show new todo form */ }; const ability = useContext(AbilityContext); return ( <div> {ability.can('create', 'Todo') && <button onClick={createTodo}>Create Todo</button>} </div> ); }

Referencia : https://casl.js.org/v5/en/package/casl-react