The Current Scenario

Angular router being able to build SPA applications supporting multiple route provides goodness of using a single HTML with all the functionalities all over the application and rendering the UI based upon the route, additionally configure route guards for granting and removing the access, which is pretty cool.😀

Another aspects to be taken care of while developing an application with high end security are authentication and authorization such that they are performed separately that too in a concentrated way, a single guard to <b>manage access</b> and a <b>pre-route action handler</b> to manage the data of the application, How is these managed in an angular application and what are the high level challenges faced ?????🤨

What is not present ?

1. Central Orientation to handle authorization and authentication pre-route with separation of concerns
2. Globally Resolve User before Component initialization
3. Globally Manage Access based upon the user role
4. Single CanActivate for all the routes to handle complex business rules separately
5. Global and component level Middlewares

Why @rxweb/angular-router ?

• A decorator which is declared in the root module with the role to handle authentication, authorization and middlewares throughout the application with are managed individually
• A single CanActivate guard with all the routes
• Component wise access check
• Centralized URL encryption

with @rxweb/angular-router

What is @rxweb/angular-router ?

@rxweb/angular-router is a package to manage routes in an angular application along with authorization, authentication in an intuitive and segregated way.

It comes with Simplification of actions to be done whenever the user redirects to the route and the data is rendered, which increases the Maintainability of the router module in our angular application and helps to avoid using multiple guards while makes the application consistent.

The Usage

Installation :

npm install @rxweb/angular-router

Add the following in the import statement in the app.module.ts

import { RxRoutingModule } from '@rxweb/angular/router';

As we discussed we will see how to globally use authorization, authentication and middlewares using a single decorator @routerModule.

The @routerModule is declared in the app.module.ts as below

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

We will one by one add values to these properties by the tutorial listed down as below :

The same way we willhttps://www.codementor.io/@ushmidave905/simplified-way-to-perform-authentication-in-angular-routing-1ecfy6paac?published=1

For implementing Authorization, refer to Simplified way to perform Authentication in Angular Routing

Conclusion

In this article we learnt about @rxweb/angular-router and its benefits and the tutorial parts of the implementation in @routerModule, along with the global implementation it also contains directive based authorization, component based middlewares and access level.