A single package to manage routes, middlewares, access, authenticity and Url encryption in an intuitive and segreated way.
Benefits
- Maintanable and consistent
- Seperation of authentication and authorization
- Individual component wise access check
- Centralized encryption management
- One `CanActivate` throughout the application
- Single decorator to navigate throughout the application
- Allow Anonymous using a single decorator
Install The Package
Install the package using the below command
npm install @rxweb/angular-router
Register the `RxRoutingModule` in the AppModule as below: Register The Module
@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