从 app.module.ts 中的 sessionStorage 获取数据答案

【问题标题】：Getting data from sessionStorage in app.module.ts从 app.module.ts 中的 sessionStorage 获取数据
【发布时间】：2018-11-28 07:04:56
【问题描述】：

在我的应用程序中，每当加载应用程序时。首先，它重定向到登录组件，我从用户那里获取数据（用户名和密码），然后单击“登录”按钮。我将用户名和密码发送到服务器并取回授权密钥，我将其设置到浏览器的 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");
  }
})

我在我的应用程序中使用@stomp/ng-stomp 进行Websocket 连接。现在我的要求是，我在 app.module.ts 中配置 stomp，以便所有其他子组件都可以访问它。

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) {}
}

现在如果你看一下 stompConfig 对象

const stompConfig: StompConfig = {
  url: socketProvider,
  headers:{
    AuthToken : sessionStorage.getItem('Authentication')
  },
  heartbeat_in: 0,
  heartbeat_out: 20000,
  reconnect_delay: 5000,
  debug: true
};

我在连接到 sockjs 时必须在此处使用授权令牌，但是当我从会话存储中取回数据时它返回 null。我将登录组件作为app.component.ts 的子组件。

那么，有什么方法可以从app.module.ts 中的 sessionStorage 中获取数据。

我们可以让它可观察，如果可以，那怎么做？

【问题讨论】：

您在设置令牌时使用“授权”作为密钥，但在执行获取时使用“身份验证” - 这是问题吗？
抱歉，打错了。我将编辑问题。

标签： angular typescript stomp sockjs

【解决方案1】：

您应该使用服务来设置全局变量。您可以在服务中执行以下操作：

stompConfig:StompConfig;
flag=false;

getStomp(): any {
    if (flag) {
        return stompConfig;
    }
    else {
        if (sessionStorage.getItem('Authentication') != null) {
            this.stompConfig: StompConfig = {
                url: socketProvider,
                headers: {
                    AuthToken: sessionStorage.getItem('Authentication')
                },
                heartbeat_in: 0,
                heartbeat_out: 20000,
                reconnect_delay: 5000,
                debug: true
            };
            flag=true;

            return stompConfig;
        }
        else { return null; }
    }
}

并从您的组件中调用此函数以获取对象。

【讨论】：