Remy's Blog. Dev Insights

Today, I'll share with you an Angular 7 application from where you can start building your own. I've followed as much as possible the best practices available here . You can find the source code at this repository . If you can improve this solution, do not hesitate to tell me. 😀 Let's inspect the different parts: Core Module 1. guards I've incorporated basically 2 guards:  The AuthGuard implements both CanActivate and CanLoad . This guard is responsible for checking if the current user is authenticated and authorized. If not authenticated, the user will be redirected to the login page. If the authenticated user hasn't sufficient permission, he will be redirected to the home page. The NoAuthGuard which implements CanActivate , provides a way to restrict a route when a user is already logged in (e.g. login). 2. interceptors The ErrorInterceptor basically intercepts client errors and server side errors. When it catches a 401 or 403

In the following interceptor, I want to test if the method loaderService.stopLoading() is properly called : As you can see this function is called from the finalize() RxJS operator. The unit test for this interceptor is as follow: Thanks for sharing...

Testing an error interceptor can be a little tricky. Below is the code I want to test : Basically we need to perform an HTTP request and respond with a mocking error for testing this interceptor. You need also to register it in the TestBed.configureTestingModule . Thanks for sharing...

For a rather large Angular project (7.2.10), I use the Angular Material components as well. As you may probably know this library does not provide out of the box a good layout system, CSS reset and utilities... So why not include these elements from the Bootstrap 4 framework ? I'll show you how you can add parts of the Bootstrap to your Angular project. Add Bootstrap to package.json You first need to include the Bootstrap to your dependencies : npm install bootstrap --save Add Bootstrap parts to the global stylesheet ( src/style.scss ) When adding the Reboot, we have to fix some issues by including : src/_variables.scss src/_reset.scss Thanks...

I will show you how you can test a guard. I'd like to test the code below: We have in this code mainly 3 cases to test: The logged in user has the required role. He should be able to access the restricted area. The logged in user has NOT the required role. He should not be able to access the restricted area. The user is redirected to the home page. The user is NOT logged in. He should not be able to access the restricted area. The user is redirected to the login page. You can run your test with ng test . You should see something like that: Thanks for sharing...

Overview Basically, our microservices are secured this way : The user provides his credentials via a public endpoint If authenticated, the server returns an authentication token (JWT) The JWT is attached to each subsequent request via an HTTP header: Authorization:Bearer TOKEN You can find the source code at https://github.com/vedrax-admin/spring-microservices User Microservice This microservice uses a MySQL database. We begin by creating the Account table: Below is a script to insert some dummy data: The Account entity will be created using JPA: The account repository: User Principal We create a class named UserPrincipal which implements UserDetails . In order to be accessible by all microservices, this class is located in our shared module. JWT Token Service This service is responsible for creating expiring JWT. We can also parse a JWT for getting the UserPrincipal . We use the io.jsonwebtoken dependency for that. Account Service