@spheremall_org/auth-module v2.0.2
SM Authorization Module
This module must be used for SM Products to unify the authorization flow.
Features of the module:
provide Amplify dynamic config for working with Cognito Multipools;
check authorization (local storage idToken) with Amplify and redirect a user to the SM Authorization form if the user is not authorized;
provide your app with logout component for header;
provide your app with available products component for header;
provide Authorization Guard to verify routes;
provide Authorization Interceptor to add auth token automatically for each request to microservices using HttpHandler.
Integration
- app.module:
Should be added as one of imports with provided parameters: apiEndpoint, formUrl which should be stored in environments files
import {SmAuthModule} from '@spheremall_org/auth-module';
@NgModule({
imports: [
SmAuthModule.forRoot({
apiEndpoint: environment.ACCOUNTS_API_ENDPOINT,
formUrl: environment.AUTH_FORM_URL
})
]
})
- routes.ts:
You should use authorization guard for your routes.
import {AuthGuardService} from '@spheremall_org/auth-module';
export const routes: Routes = [
{
path : '',
component : Component,
canActivate: [ AuthGuardService ],
data : { isProduction: environment.production }
}
];
- app.component:
Authorization will be automatically checked on Guard level, but you can use
isAuthorized
method fromAuthService
if it is needed.
import {AuthService} from '@spheremall_org/auth-module';
export class AppComponent implements OnInit {
constructor(private authService: AuthService) {}
ngOnInit() {
this.authService.isAuthorized().subscribe((isAuthorized) => {
// this.showNavigation = isAuthorized;
// your action on authorized here
});
}
}
- services usage
AuthorizationInterceptor
will add authorization header to each request automatically. It is already included inSmAuthModule
, no other actions required.IdToken
can be found inAuthService.getToken()
.
import {AuthService} from '@spheremall_org/auth-module';
export class UsersService {
private token: string;
constructor(private authService: AuthService) {
authService.getToken().then(token => {
this.token = token;
});
}
}
- header logout functionality
user.component.ts
import {AuthService} from '@spheremall_org/auth-module';
@Component({
selector : 'app-user',
templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
user: any = {};
constructor(private authService: AuthService) { }
ngOnInit() {
this.authService.getAuthorizedUser().subscribe(user => {
this.user = user;
});
}
}
user.component.html
<div class="user-data" *ngIf="!!user.email" appDialog> <span class="user-name"> {{ user.email }} <mat-icon aria-hidden="false">more_vert</mat-icon> </span> <div class="user-details"> <div class="content"> <mat-card> <mat-card-content> <mat-list class="nav-list navigation"> <mat-list-item> <!-- SmAuthModule logout in header --> <sm-auth-header-logout></sm-auth-header-logout> </mat-list-item> </mat-list> </mat-card-content> </mat-card> </div> </div> </div>
- header available products list app.component.html
<!--Remove existing logo & title <span class="title-logo"> <img src="../assets/images/shell-app-icon.png" alt="{{ title }}"> </span> <h1>{{ title }}</h1> -->
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago