Angular 从app.module.ts中的会话存储获取数据

在我的应用程序中，无论何时加载应用程序。首先，它重定向到登录组件，我从用户那里获取数据（用户名和密码），并在“登录”按钮中单击。我将用户名和密码发送到服务器，并取回授权密钥，我将其设置到浏览器的会话存储中

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

中的会话存储中获取数据呢

---

我们可以让它可见吗？如果是，那么如何呢？

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

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; }
    }
}

---

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

设置令牌时使用“授权”作为密钥，而在执行获取时使用“身份验证”——这就是问题所在吗？抱歉，这是一个输入错误。我将编辑这个问题。