NGRX Fundamentals
Build a Shopping Cart
Reserved Area
In this chapter, we'll explore how to integrate NGRX with a JWT-based authentication approach.
The primary objective here is to understand how NGRX can be utilized in scenarios involving authentication, such as with router guards, HTTP interceptors, creating structural directives to protect the DOM and more.
Important!
The implementation presented here is strictly for educational purposes and does not meet the security standards required for a production-ready authentication system.
# Topics
In this chapter:
1
Build the Login page
2
Implement login and logout procedures
3
Use NGRX to build the JWT authentication system: actions, reducers, effects, selectors and extraSelectors
4
Learn how to create sequence of NGRX effects
5
Add router navigation in effects
6
Create effects that does not dispatch actions
7
Sync localStorage with NGRX
8
Protect access to routes with NGRX and Router Guards
9
Use selectors in HTTP Interceptors and global error handling
10
Use selectors in structural Directives to protect the DOM
# Why NGRX with jwt?
NGRX is a powerful state management library for Angular, and integrating it with authentication workflows provides a seamless way to handle user states across your application.
JWT (JSON Web Tokens) is a common method for securely transmitting information between parties as a JSON object. However, securely implementing JWT involves many considerations, which we will not cover in depth here.
Instead, we'll focus on how to leverage NGRX to manage authentication states.
