npm install @rxweb/angular-router

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RxRoutingModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Authentication

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 which is implemented using the following steps.

Step 1:

Constructing The Global Authentication resolver:

export class AuthResolver implements IAuthResolver {

  resolveAuth() {
    // Wite the custom logic here..
     ...
  }
}

Step 2:

Declaring it using @routerModule in the root module:

@routerModule({
    authentication: AuthResolver
  })
@NgModule({...})
export class AppModule { }

Authorization

The authorization class is used for performing role based authorization based upon the user logged-in the client application, The access is provided after the resolved object is obtained are categorized into three ways(Page level access, component level access, control level access)

Retrieving the user access object is done based upon the application module and the action type. This is resolved globally whenever the navigation takes place throughout the application using Authorize function.

Step 1 :

Constructing the global Authorization Resolver

export class AuthorizationResolver implements IAuthorize {

  authorize(authorizeConfig: AuthorizeConfig,
    route: ActivatedRouteSnapshot
  ): Promise<boolean> | boolean {
    // Wite the custom logic here..
    ....
  }
}

Step 2:

Declaring it using @routerModule in the root module:

@routerModule({
    authorization: AuthorizationResolver
  })
@NgModule({...})
export class AppModule { }

Step 3 :

Setting access on the component using @access:

@access({accessLevel:1,action:'get'})
export class CandidateComponent implements OnInit {
 ...
}

Step 4:

Setting up the route:

const ROUTES: Routes = [
    {
        path: '',
        component: CandidateComponent, canActivate: [BaseCanActivate] 
    }
];

Middleware

To invoke some task pre navigation globally whenever any request is made to perform data management and communication in a centralized manner.

Step 1:

Constructing the global middleware:

export class ConfigurationResolver implements IMiddleware {
  
  invoke(user: { [key: string]: any }) {
    // Wite the custom logic here..
   ...
  }
}

Step 2:

Declaring it using @routerModule in the root module:

@routerModule({
    middlewares:[ConfigurationResolver]
  })
@NgModule({...})
export class AppModule { }

*rxAuthorize Directive

Authorizing the shared component and the controls using the *rxAuthorize by passing the component name along with the directive, To restrict the control to the unauthorized users in the application using this diecrtive is done as below:

Step 1:

<a *rxAuthorize="candidateAvailabilityAdd" (click)="addCandidateAvailability " ><i class="fa fa-plus ml-2"></i></a>

@rxweb/angular-router provides mechanism to perform decorator based component specific authorization and invoking component level middleware using decorators @access, @anonymous and @middleware