_helpers
The followings are the files under the “_helper” folders.
Auth Guard
The auth guard is an angular route guard which is used to shut out unauthenticated or unauthorized users from accessing restricted routes.
This is done by implementing the CanActivate interface that permits the guard to determine if a route is activated with the canActivate(). If this method returns true it means that the route is activated, the user is allowed to proceed, and if this method returns false the route is blocked.
The auth guard uses the authentication service to visualize if the user is logged in, if they’re logged in, it checks if their role is permitted to access the requested route. If they’re logged in and licensed the canActivate() method returns true, otherwise, it returns false and redirects the user to the login page.
Angular route guards are associated with the routes in the router config, this auth guard is used in app.routing.ts to protect the home page and admin page routes.
auth.guard.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthenticationService } from '../_services'
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private authenticationService: AuthenticationService
) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const currentUser = this.authenticationService.currentUserValue;
if (currentUser) {
if (route.data.roles &&
route.data.roles.indexOf(currentUser.role) === -1)
{
this.router.navigate(['/']);
return false;
}
return true;
}
this.router.navigate(['/login'],
{ queryParams: { returnUrl: state.url } });
return false;
}
}
HTTP Error Interceptor
The Error Interceptor intercepts HTTP responses from the api to check if there have been any errors. If there’s a 401 Unauthorized or 403 Forbidden response the user is automatically logged out of the application, all other errors will be re-thrown up to the calling service so that an alert with the error can be displayed on the screen.
This interceptor is applied using the HttpInterceptor class contained in the HttpClientModule.
Error.interceptor.ts:
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthenticationService } from '../_services';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) { }
intercept(request: HttpRequest, next: HttpHandler): Observable> {
return next.handle(request).pipe(catchError(err => {
if ([401, 403].indexOf(err.status) !== -1) {
this.authenticationService.logout();
location.reload(true);
}
const error = err.error.message || err.statusText;
return throwError(error);
}))
}
}
Fake Backend Provider
In this application, we used a fake backend API to intercept the HTTP requests to run and test the angular application instead of using a real backend API. We have done this by a class that implements the Angular HttpInterceptor interface.
fake-backend.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
import { User, Role } from '../_models';
const users: User[] = [
{ id: 1, username: 'admin', password: 'admin', firstName: 'Admin', lastName: 'User', role: Role.Admin },
{ id: 2, username: 'user', password: user', firstName: 'Normal', lastName: 'User', role: Role.User }
];
@Injectable()
export class FakeBackendInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
const { url, method, headers, body } = request;
return of(null)
.pipe(mergeMap(handleRoute))
.pipe(materialize())
.pipe(delay(500))
.pipe(dematerialize());
function handleRoute() {
switch (true) {
case url.endsWith('/users/authenticate') && method === 'POST':
return authenticate();
case url.endsWith('/users') && method === 'GET':
return getUsers();
case url.match(/\/users\/\d+$/) && method === 'GET':
return getUserById();
default:
return next.handle(request);
}
}
function authenticate() {
const { username, password } = body;
const user = users.find(x => x.username === username
&& x.password === password);
if (!user) return error('Username or password is incorrect');
return ok({
id: user.id,
username: user.username,
firstName: user.firstName,
lastName: user.lastName,
role: user.role,
token: `fake-jwt-token.${user.id}`
});
}
function getUsers() {
if (!isAdmin()) return unauthorized();
return ok(users);
}
function getUserById() {
if (!isLoggedIn()) return unauthorized();
if (!isAdmin() && currentUser().id !== idFromUrl())
return unauthorized();
const user = users.find(x => x.id === idFromUrl());
return ok(user);
}
function ok(body) {
return of(new HttpResponse({ status: 200, body }));
}
function unauthorized() {
return throwError({ status: 401,
error: { message: 'unauthorized' } });
}
function error(message) {
return throwError({ status: 400, error: { message } });
}
function isLoggedIn() {
const authHeader = headers.get('Authorization') || '';
return authHeader.startsWith('Bearer fake-jwt-token');
}
function isAdmin() {
return isLoggedIn() && currentUser().role === Role.Admin;
}
function currentUser() {
if (!isLoggedIn()) return;
const id = parseInt(headers.get('Authorization').split('.')[1]);
return users.find(x => x.id === id);
}
function idFromUrl() {
const urlParts = url.split('/');
return parseInt(urlParts[urlParts.length - 1]);
}
}
}
export const fakeBackendProvider = {
provide: HTTP_INTERCEPTORS,
useClass: FakeBackendInterceptor,
multi: true
};
