Full-stack role-based authorization in 45 minutes

What's the right way to secure your API and UI based on user roles? Learn to build a full-stack RBAC system with Node.js and a custom Angular directive.

#1about 1 minute

Differentiating between authentication and authorization

Authentication verifies a user's identity, while authorization determines what actions that verified user is permitted to perform.

#2about 3 minutes

Visualizing a role-based multi-user application flow

A conceptual walkthrough shows how different user roles, like owner and reader, experience different UIs and permissions within the same account.

#3about 1 minute

Structuring a domain model for multi-user accounts

A simple data model links users and shared entities back to a parent account, creating a clear boundary for permissions.

#4about 3 minutes

Sharing TypeScript models in a full-stack monorepo

Use TypeScript path mapping in a monorepo to reference a single source of truth for domain models, avoiding code duplication between the client and server.

#5about 3 minutes

Implementing permission logic based on business rules

Authorization logic is built by asking key questions, such as whether an entity belongs to the user's account and if the user's role permits the requested action.

#6about 1 minute

Designing a secure API using protected URL zones

Structure API endpoints with prefixes like `/api/app` to create a protected zone where authorization middlewares are consistently applied.

#7about 1 minute

Using a user auth object to manage state

The frontend receives and stores a user auth object or decodes a JWT after login to know the current user's ID and role for UI decisions.

#8about 5 minutes

Protecting client-side routes with Angular router guards

Angular's `canActivate` and `canLoad` guards prevent unauthorized users from accessing certain application routes, improving the user experience.

#9about 4 minutes

Implementing authorization with interceptors and middlewares

Frontend HTTP interceptors attach auth tokens to outgoing requests, while backend middlewares enforce permission rules on protected API routes.

#10about 2 minutes

Conditionally rendering UI with a custom Angular directive

A custom structural directive like `*forRoles` provides a declarative way to show or hide UI elements based on the current user's role.

#11about 9 minutes

Live demo of a full-stack RBAC implementation

A practical demonstration shows how a reader role is prevented from modifying data, both through the UI and by attempting to bypass it with direct API calls.

#12about 7 minutes

A seven-step guide to securing modern web apps

A bonus overview covers key security practices, including understanding the web security model, choosing an auth architecture, and implementing logging.