In this post we’ll add a route guard that only allows the user to navigate to the
/beer route if they’re authenticated. The new
AuthRouteGuard will determine if the user is authenticated via a NGRX store using a selector that checks for the existence of a JWT.
This post builds on the last post Add JWT Token to Angular HTTP Requests Using NGRX and will ultimately turn into “Part 2” of a series; it probably should’ve been “Part 1” as it provides the actual login UI form and complimentary authentication API with a real JWT, but at the time of writing the first post I didn’t have a series planned…so what’s this post about?
It’s become pretty commonplace to authenticate and authorize web clients using JWTs (JSON Web Tokens) via HTTP request headers; it’s also become fairly popular to leverage some form of state management in web clients with a flavor of Redux. In this post I’ve created a simple web client with Angular CLI and NGRX that demonstrates how to retrieve a saved JWT from a NGRX store and apply it to all API requests using an HTTP interceptor.