Appearance
Access Control List (ACL) Overview
Role-Based and Ability-Based Access
Access control in the application is implemented using CASL (Code Access Control Library), which allows you to define granular permissions based on the user's abilities. These abilities determine what actions the user can perform on different resources within the app.
Each user is associated with a set of ability rules that specify which actions they are allowed to perform on which subjects (e.g., viewing, editing, deleting). These rules are fetched during login and are stored in cookies.
Menu and Navigation Control
The navigation menu is dynamically rendered based on the user's abilities. Only the menu items that the user has the right to access (according to their ability rules) will be shown. This ensures that users can only see and interact with resources they are authorized to access.
Route Guards
Route guards are used to protect certain routes based on the user's abilities. Before navigating to a route, the system checks if the user has the necessary permissions to access that route. If not, they are either redirected to a "Not Found" page or back to the login page, depending on the scenario.
How Everything Ties Together
- Authentication ensures that only authenticated users can access the application, using JWT tokens that are stored in cookies.
- Access Control (ACL) ensures that users can only perform actions and access resources they are authorized to, based on their abilities and role.
- The refresh token flow ensures that users remain logged in without needing to frequently re-authenticate.
- The route guards and dynamic menus ensure that users can only access the parts of the app they are permitted to.
In this setup, security and usability go hand in hand, allowing for a seamless and controlled user experience while maintaining a high level of access control.
INFO
This implementation is for demonstration purposes only. In this project, we use Axios Mock Adapter to simulate a real-world backend. This mock implementation is designed to mimic the authentication and access control flow but does not interact with a real backend system.
When integrating this with an actual backend, you will need to adjust the API endpoints and modify the logic for handling JWT token issuance, refresh token functionality, and user role management. Specifically, replace the mock logic with real API calls to your backend server that will handle user authentication and access control securely.