During the initialization of my application, it automatically redirects to the Login component. Here, I collect user data (username and password) and upon clicking the "Sign In" button, I send this information to the server. Upon receiving the Authorization key back from the server, I store it in the browser's sessionStorage.
this.http.post('/app/getUserByEmailAndPassword', userParams, {headers: this.headers}).subscribe(response => {
if(response.status == 200){
var data = response.json();
sessionStorage.setItem('Authorization', data.authKey);
this.userName = data.userName;
} else {
console.log("Error Occured While Logging In");
}
})
In order to establish a WebSocket connection in my application, I am utilizing @stomp/ng-stomp. To ensure accessibility across all child components, I am configuring stomp in app.module.ts.
import { endponitConfig } from './../environments/endpoints';
import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
/*
* Platform and Environment providers/directives/pipes
*/
import { routing } from './app.routing'
// App is our top level component
import { AppComponent } from './app.component';
import { APP_RESOLVER_PROVIDERS } from './app.resolver';
import { AppState, InternalStateType } from './app.service';
// Core providers
import {CoreModule} from './core/core.module';
import {SmartadminLayoutModule} from './shared/layout/layout.module';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AuthGuard } from './+auth/+guards/index';
import { userRoleGuard } from './+auth/+guards/userRole.guard';
import { ChartModule } from 'angular-highcharts';
import * as SockJS from 'sockjs-client';
import {StompConfig, StompService} from '@stomp/ng2-stompjs';
import {} from 'jasmine';
export function socketProvider() {
return new SockJS(endponitConfig.WEBSOCKET_URL);
}
const stompConfig: StompConfig = {
url: socketProvider,
headers:{
AuthToken : sessionStorage.getItem('Authorization')
},
heartbeat_in: 0,
heartbeat_out: 20000,
reconnect_delay: 5000,
debug: true
};
// Application wide providers
const APP_PROVIDERS = [
...APP_RESOLVER_PROVIDERS,
AppState
];
interface StoreType {
state: InternalStateType,
restoreInputValues: () => void,
disposeOldHosts: () => void
}
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
],
imports: [ // import Angular's modules
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
ChartModule,
ModalModule.forRoot(),
CoreModule,
SmartadminLayoutModule,
routing
],
exports: [
],
providers: [ // expose our Services and Providers into Angular's dependency injection
// ENV_PROVIDERS,
AuthGuard,
userRoleGuard,
APP_PROVIDERS,
StompService,
{
provide: StompConfig,
useValue: stompConfig
}
]
})
export class AppModule {
constructor(public appRef: ApplicationRef, public appState: AppState) {}
}
When examining the stompConfig object,
const stompConfig: StompConfig = {
url: socketProvider,
headers:{
AuthToken : sessionStorage.getItem('Authentication')
},
heartbeat_in: 0,
heartbeat_out: 20000,
reconnect_delay: 5000,
debug: true
};
I encountered an issue where the Authorization token was returning null while trying to connect to sockjs. The Login component is nested within app.component.ts.
Is there a method to access sessionStorage data within app.module.ts? Can we utilize observables for this purpose, and if so, how?