This is a showcase for the usage of CASL authorization library in a meteor/react environment using the ant-design UI library. It demonstrates storing the abilities for each user in the mongoDB users collection and loading them when a user logs in into the app.
Within the ContentComponent.jsx the content is then rendered based on the abilities of each user. There are three test users defined:
- admin@demo.ger / admin
- manager@demo.ger / manager
- user@demo.ger / user
-
The setup of the users, their abilities and storing those information is done in /server/main.js by using the basic meteor/Accounts functionality.
-
The abilities for each user group are defined within /imports/casl/Abilities.js.
-
To see how the abilities of the currently logged in user are resolved and set into the AbilityContext please look into:
- /imports/ui/layouts/AppContainer.jsx
- /imports/ui/layouts/App.jsx
- constructor :: Setting up the initial state
- componentDidUpdate :: Handling the change of the abilities of logged in user
- render() :: Wrapping the app content into a <AbilityContext.Provider/> component
-
To usage of the CASL tag can is shown in the following components
- /imports/ui/components/SimpleComponent.jsx
- /imports/ui/components/MenuComponent.jsx
Ant-Design obviously has a problem rendering custom components inside of several structured compoents (e.g. Menu/SubMenu, Select.Option, Collapse, Tabs, etc). Please see ant-design/ant-design#4853. I used a workaround to render submenus that are surrounded by a CASL tag to check user permissions within MenuComponent.jsx. However I did not yet figure out how to render Icons in the SubMenu title correctly with this approaach. Currently icons are not rendered in the titles.
- Checkout the git branch
- Run either npm install or yarn to download and setup the npm_packages
- Execute the application from terminal/console with meteor
- If you want to reset the meteor application and the stored data execute meteor reset from terminal/console