This is an example Food Delivery project. It is a simple end-to-end application aimed at demonstrating RBAC, ABAC, ReBAC, CASL, and Authentication Integration in Vue, all with Permit.io.
This repo has 3 branches. The code in each branch resemble each other but are slightly modified to express the particular concept being showcased. Also, splitting them like this helps you understand what's going on in a particular concept. The repo branches are as follows:
rbac: Demonstrates Role-Based Access Control (RBAC)firebase-abac-rebac: Demonstrates Authentication integration with Firebase, then Attribute-Based Access Control (ABAC) and Relationship-Based Access Control (ReBAC)casl: Demonstrates using CASL for frontend enforcement.
You are currently in the rbac branch.
The involved roles are Customer, Vendor, Rider, and Admin. The involved entities/resources are Meals and Orders.
Following are the capabilities:
- Vendors Create Meals,
- Customers place Orders (of meals),
- Vendors fulfill Orders (mark meals as ready),
- Admins assign Riders to Orders
- Riders deliver Orders
- Admins can do rider and vendor actions too.
The application consists of 4 pages for each of the roles with a modified interface showing what a holder of a role can do. The UI was built with TailwindCSS and PrimeVue. The current focus of the project is on Authorization and as such, the "userId"s of the role holders where simply hardcoded in each page.
There is a mini server in the /backend directory for enforcing roles and access control. The server is a NodeJS/Express setup that exposes routes for managing meals and orders. Meals and Orders are stored as JSON files in the /backend/temp and are hidden with Git (to allow you experiment as much).
Actions in the Vue frontend makes calls to the backend's API and modify state. This way data is persisted across page reloads. But the main idea of this repo is to abstract and showcase how Authorization works with Permit.io.
The userId is sent as a user key in every request so that Authorization checks can take place against that user. These checks take place in the checkPermissions middleware in the backend.
The middleware is defined in the permissions.ts file. Specifically, we are checking that the rightful userId has permissions to carry-out the intended action on the target resource. The middleware extrapolates info from the request object. You should extract these in a more robust way in a production application.
To test/get started, provide your Permit token in a /backend/.env file as shown in the /backend/.env.sample file and start up the server in the /backend directory: run cd backend && npm run dev
Then in another terminal, start up the Vue frontend with npm run dev (in root of this project) and open the application in a browser at http://localhost:5173.