Enforcing authorization

Now that we can be sure that our JWT-based auth implementation is working as expected, we need to define some testable auth-based navigation patterns and access rules that will allow us to differentiate the logged-in user from the anonymous one, preventing the latter from either seeing and doing something that he shouldn't be allowed to. Needless to say, we need to handle them on the client side and also on the server side.

It's actually easy to do that, since we already have some Angular components that should be made accessible to authenticated users only and vice versa--along with the .NET Core controllers they use under the hood; let's see how we can pull off that task.

Adapting the client

Let's start by updating the main menu navigation bar.

NavMenuComponent

From the /ClientApp/app/components/navmenu/ folder, open the navmenu.component.ts file and update it in the following way:

import { Component } from '@angular/core';
import { AuthService } from '../../services...