In this tutorial we’ll go through an example of how to implement role based authorization / access control in Angular 9. The example builds on a previous tutorial I posted which focuses on JWT authentication, this example has been extended to include role based access control on top of the JWT authentication.

The tutorial example is pretty minimal and contains just 3 pages to demonstrate role based authorization - a login page, a home page and an admin page. There are two roles - a regular user (Role.User) that can access the home page, and an admin user (Role.Admin) that can access everything (i.e. the home page and admin page).

The Angular CLI was used to generate the base project structure with the ng new <project name> command, the CLI is also used to build and serve the application. For more info about the Angular CLI see https://angular.io/cli.

Styling of the example app is all done with Bootstrap 4.4 CSS, for more info about Bootstrap see https://getbootstrap.com/docs/4.4/getting-started/introduction/.

The tutorial code is available on GitHub at https://github.com/cornflourblue/angular-9-role-based-authorization-example.

Here it is in action:

(See on StackBlitz at https://stackblitz.com/edit/angular-9-role-based-authorization-example)

#angular 9 #angular #programming