Angular2 - Loopback -Security Implementations

Question

What all are the security implementations we can do in an Angular - Loopback projects. Is the helmet is already implemented in loopback?

Answer 1

So just to make your life a little bit easier I'm going to advise you to take a look at @mean-expert/loopback-sdk-builder which will auto create a module to import into your application providing you with all the services you need for your API endpoint.

Now, for our security implementations in Angular, I would recommend writing out route guards, and lazy loading your routes. Here is an example of a route guard I have in one of my applications

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Observable, Subscription } from 'rxjs';

import { UserService } from '../services/user.service';

@Injectable()
export class UserGuard implements CanActivate {
  private _user: any;
  private _userSubscription: Subscription;

  constructor(private _router: Router, private _userService: UserService) {
    this._userSubscription = this._userService.user.subscribe((user: any) => {
      this._user = user;
    });
  }

  canActivate(): boolean {
    if (this._user) {
      return true;
    }
    this._router.navigate(['/', 'sign-in']);
    return false;
  }
}

I also have a custom user service that uses the account/user service that the SDK builder made for me.

import { Injectable, Inject } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

import { User, SDKToken } from '../sdk/models';
import { UserApi, LoopBackAuth } from '../sdk/services';

@Injectable()
export class UserService {
  private _user: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  constructor(private _userApi: UserApi, @Inject(LoopBackAuth) protected auth: LoopBackAuth) {
    this._restoreUser();
  }

  get user(): Observable<any> {
    return this._user.asObservable();
  }

  private _restoreUser(): void {
    this._user.next(this.auth.getCurrentUserData());
  }

  public signIn(user: User, callback?: any): void {
    this._userApi.login(user).subscribe((token: SDKToken) => {
      this.auth.save();
      const user: any = this.auth.getCurrentUserData();
      this._user.next(user);
      if (callback) {
        callback(null, user);
      }
    }, (error: any) => {
      if (callback) {
        callback(error.message, null);
      }
    });
  }

  public signOut(callback?: any): void {
    try {
      this._userApi.logout().subscribe();
    } catch (e) { }
    this.auth.clear();
    this._user.next(null);
    if (callback) {
      callback(null, true);
    }
  }

  public signUp(user: User, callback?: any): void {
    this._userApi.create(user).subscribe((account: any) => {
      if (callback) {
        callback(null, account);
      }
    }, (error: any) => {
      if (callback) {
        callback(error.message, null);
      }
    });
  }
}

We allow the SDK Builder to handle the cacheing of our tokens, and for our API endpoints that require user authentication we can use the token id from our newly minted user service (the services from the SDK builder will require it!)

The final thing you'll want to look at is migrating what should be your protected routes into their own module. Doing so will allow us to lazy load those components only when we need them! (Rather than them coming in as soon as the app loads). This will require a bit more works, so I'd recommend taking a look at this guide from Rangle.io.