In this article we discuss a intuitive way to implemenent Authentication in angular application using @rxweb/angular-router

@rxweb/angular-router is a single package to manage routes, middlewares, access, authenticity and Url encryption in a segregated way

The Setup

To install and setup @rxweb/angular-router in the application install the package and declare RxRoutingModule in import section of the root module. For in detail information of the base and the setup, refer to Introducing @rxweb/angular-router : Handle Angular Routing Better

Global Level Authentication

@rxweb/angular-router provides global level authentication and using the @routerModule decorator.

The authentication parameter will be provided a global AuthResolver class which will resolve the user object whenever the user will log in after that the user object will be available to the component whenever the route navigation takes place even if the page is refreshed, There is no need to store this in local storage which provides better security.

Lets begin by adding the authentication parameter, Start by creating a class named AuthResolver which will resolve the user object by making a request to server further it will provide the user object to the component whenever the navigation takes place.

The resolveAuth will resolve the auth object depending upon your custom code, here we take an example where the auth is resolved from a json file

After the creation the AuthResolver.ts looks like this:

import { Injectable } from "@angular/core";
import { IAuthResolver } from "@rxweb/angular-router";
import { HttpClient } from "@angular/common/http";
import { ApplicationObjects } from "./application-objects";

@Injectable({
  providedIn: "root"
})
export class AuthResolver implements IAuthResolver {
  constructor(private http: HttpClient) {}

  resolveAuth(): Promise<{ [key: string]: any }> | { [key: string]: any } {
    var promise = new Promise<{ [key: string]: any }>((resolve, reject) => {
      // Your custom logic here
      if (ApplicationObjects.user == undefined)
        this.http.get("assets/json/user.json").subscribe(response => {
          ApplicationObjects.user = response;
          resolve(response);
        });
    });
    return promise;
  }
}
 

Further adding it in authentication parameter of the @routerModule we created before:

@routerModule({
    authentication: AuthResolver,
    authorization :,
    middlewares : [] 
  })
@NgModule({...})
export class AppModule { }

Here is the working example of the Authentication resolver

router-authentication

Conclusion

In this article we covered a basic go through along with the advantages of @rxweb/angular-router package along with centralized authentication. @rxweb/angular-router also provides globally accessible authorization and middlewares which are used to resolve the authorization object and perform actions pre-route navigation.