PmeLoginModule
An authentication service, authentication interceptor and associated components for logging into the asa access control service.
Dependencies
This Library Depends on the following libraries. Angular Material 5.0.4 Angular 5.2.6 or above rxjs 5.5.2 or above
Getting Started
Install the login module via npm.
npm install pme-login-module --registry http://nuget.ma.aptima.com/npm/AMeasureJSNPM
Import pme-login-module in your app.module.ts. It is important to also load the AuthService and AuthConfig classes for instantiating the services.
import { AuthService, LoginModule, AuthConfig } from 'pme-login-module';
Create an AuthConfig constant in app.module.ts with the desired url for the auth server. This defaults to http://pmattdb.ma.aptima.com/accesscontrol/
const AuthConfig = {
serverUrl: 'http://localhost:5000/'
};
You can also provide the url to the login page of your app which will be used for any 401 errors. The path defaults to 'login'.
const AuthConfig = {
serverUrl: 'http://localhost:5000/',
loginUrl: 'user-login'
};
Add the Login Module to your app module's imports, passing in the AuthConfig object created above.
LoginModule.forRoot(AuthConfig)
Add the AuthService to your providers. (Note: I also had to add MatDialog to the providers in order to get around a runtime error complaining about no provider for MatDialog.)
providers: [AuthService, MatDialog]
Using the Login Module
The login module is designed to be used with an AuthGuard and Angular's Routing. Example Route Configuration
import { Routes, CanActivate } from '@angular/router';
import { LoginComponent } from 'pme-login-module';
import { AuthGuardService as AuthGuard } from './services/auth-guard.service';
import { MainComponent } from './main/main.component';
export const ROUTES: Routes = [
{ path: '', component: MainComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: '**', redirectTo: '' }
];
In the above example the Main Component is the Workbench Dashboard and the Login Component is from the Login Module.
Example AuthGuard
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from 'pme-login-module';
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(public auth: AuthService, public router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (!this.auth.isAuthenticated()) {
this.router.navigate(['login'], { queryParams: { returnUrl: state.url }});
return false;
}
return true;
}
}
In the above AuthGuard example, we are passing a returnUrl queryParam to the router. This is used by the login component to know where to route to after a successful login.