Asp.net mvc 使用angular 2应用程序进行mvc登录的会话数据

我们有一个MVC登录站点，一旦成功登录，它将加载angular 4应用程序。我们使用的是mvc控制器，它有一个保存用户数据的会话管理器。我的angular 2应用程序获取和保存这些数据的最佳方式是什么？目前我有一个具有UserId和UserStatus的全局服务。用户状态需要控制对网站部分内容的访问，包括隐藏或显示一些导航菜单链接

问题是调用在页面呈现之前没有完成，因此菜单没有得到更新，站点的主页显示所有控件。如果我点击到另一个页面，然后返回该网站的主页根据用户的状态正确隐藏部分。我创建了一个简单的plnkr来模拟它

我添加了一个setTimeout变量来模拟从服务器获取数据的延迟。请注意，带有setTimeout的设置在页面加载之前尚未完成，因此它显示了错误的值

有没有办法延迟应用程序加载或主组件的呈现，直到从服务器检索到权限

以下是plnkr文件：

main.ts：

    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
    import {AppModule} from './app';

    import { SessionService } from './session.service'; 

    platformBrowserDynamic().bootstrapModule(AppModule, [SessionService])

app.ts

    import {Component, NgModule, VERSION} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'

    import {SessionService } from './session.service';

    import { LayoutModule } from './layout.module';


    @Component({
      selector: 'my-app',
      template: `
        <div>
          <h2>Hello {{name}}</h2>
          <layout></layout>
        </div>
      `,
      providers:[
        SessionService
      ]
    })
    export class App {
      name:string;
      constructor() {
        this.name = `Angular! v${VERSION.full}`
      }
    }

    @NgModule({
      imports: [ 
        BrowserModule,
        LayoutModule
        ],
      declarations: [ App ],
      bootstrap: [ App ]
    })
    export class AppModule {}

session.service.ts

    import { Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/Rx';

    @Injectable()
    export class SessionService { // extends ServiceAdapter {

        private _userStatus: boolean = false;
        private _userStatusWithTimeout: boolean = false;
        private _userID: number;
        private _getSessionUserID = 'Session/GetSessionUserID';
        private _getIsSessionUserStatus = 'Session/GetIsSessionUserStatus';

        constructor() {

            this.setSessionVariables();
        }

        setSessionVariables() {

            this.loadUserID()
                .do(data => console.log("loading id: ", data))
                .subscribe(result => this._userID = result);

            this.loadUserStatus()
                .do(data => console.log("loading status: ", data))
                .subscribe(result => this._userStatus = result);

            this.loadUserStatusWithTimeout()
                .do(data => console.log("loading status with timeout: ", data))
                .subscribe(result => this._userStatusWithTimeout = result);
        }

        loadUserID(): Observable<number> {
            return  Observable.of(setTimeout(() => { 1 }, 1000))  // this.getaction<number>(this._getSessionUserID);
        }

        loadUserStatus(): Observable<boolean> {
            return Observable.of(true)   //this.getaction<number>(this._getIsSessionUserStatus);
        }

        loadUserStatusWithTimeout(): Observable<boolean> {
          console.log("setting temp", this._userStatusWithTimeout);
          setTimeout(() => { this._userStatusWithTimeout = true }, 1000)
          console.log("temp is set", this._userStatusWithTimeout); 

            return Observable.of(this._userStatusWithTimeout)   //this.getaction<number>(this._getIsSessionUserStatus);
        }

        getUserID(): number {
            return this._userID;
        }

        getUserStatus(): boolean {
            return this._userStatus;
        }

        getUserStatusWithTimeout(): boolean {
            return this._userStatusWithTimeout;
        }
    }

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
进口“rxjs/Rx”；
@可注射（）
导出类SessionService{//扩展ServiceAdapter{
private\u userStatus:boolean=false；
private\u userStatusWithTimeout:boolean=false；
private\u userID:number；
private _getsessionserid='Session/getsessionserid'；
private _getIsSessionUserStatus='Session/getIsSessionUserStatus'；
构造函数（）{
这个.setSessionVariables（）；
}
setSessionVariables（）{
this.loadUserID（）
.do（数据=>console.log（“加载id:，数据））
.subscribe（result=>this.\u userID=result）；
this.loadUserStatus（）
.do（数据=>console.log（“加载状态：，数据））
.subscribe（result=>this.\u userStatus=result）；
this.loadUserStatusWithTimeout（）
.do（数据=>console.log（“加载状态超时：，数据））
.subscribe（result=>this.\u userStatusWithTimeout=result）；
}
loadUserID（）：可观察{
返回Observable.of（setTimeout（（）=>{1}，1000））//this.getaction（this.\u getSessionSerid）；
}
loadUserStatus（）：可观察{
返回Observable.of（true）//this.getaction（this.\u getIsSessionUserStatus）；
}
loadUserStatusWithTimeout（）：可观察{
console.log（“设置温度”，this.\u userStatusWithTimeout）；
setTimeout（（）=>{this.\u userStatusWithTimeout=true}，1000）
console.log（“临时设置”，此为.\u userStatusWithTimeout）；
返回可观察的.of（this.\u userStatusWithTimeout）//this.getaction（this.\u getIsSessionUserStatus）；
}
getUserID（）：编号{
返回此。\u userID；
}
getUserStatus（）：布尔值{
返回此。\u userStatus；
}
getUserStatusWithTimeout（）：布尔值{
返回此。\u userStatusWithTimeout；
}
}
 > p>而不是在获取会话数据时隐藏隐藏的UI，一旦验证用户应该看到它，就会显示受限制的UI。这将防止用户不应该看到闪烁和消失的控件。如果在新元素出现时创建了一些JANK，请考虑在其周围设计的加载状态。

Angular中加载状态的最基本实现是在请求启动时将组件或服务上的
isLoading
标志设置为true，然后在完成时设置为false。然后在模板中的元素上放置
*ngIf='service.isLoading'
，瞧。
下面是我为分页服务制作的一个简单示例：//

此外，如果您使用MVC框架为Angular应用程序提供服务，则可以将您的权限作为JavaScript对象嵌入Angular的索引页窗口中，使其立即可用于应用程序的权限/会话服务。这将避免在获取权限时出现任何加载延迟，但需要额外的确认确保服务器代码在Angular launch页面中正常工作。
为什么不订阅您的Observable并使用NgIf（）当你获得实际数据时？这就是它当前的功能。主屏幕是一个仪表板，加载多个组件，一旦用户状态更新，组件就会消失或在屏幕加载后显示。如何在某些组件获取数据时为其创建加载屏幕？我看到了将数据发送到angular应用程序的示例粗略的ElementRef，但由于安全风险，似乎不鼓励这样做。我更新了我的答案，以包括加载状态的方向，并提供了一个示例：）不确定是否使用ElementRef传递数据，但您发送给客户端的任何内容本质上都是不安全的。感谢您在这方面提供的帮助。我尝试了加载屏幕，用于需要他使用权限值，但在查看过程中等待所有数据b/f时，这些值似乎不一致。为了防止应用程序加载时服务器延迟，我让我的mvc索引页将这些值保存在会话存储中，然后我的会话服务在应用程序加载时获取这些值。再次感谢您的帮助。很高兴提供帮助！如果我的答案不是abl为了直接解决你的问题，如果你觉得有什么用的话，我可以谦恭地要求你投一票吗？干杯。
    import { Component } from '@angular/core';
    import { NgControl } from '@angular/forms';

    @Component({
        selector: 'layout',
        template: '<home></home>'
    })

    export class LayoutComponent {}

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

    //components
    import { HomeComponent } from './home.component';
    import { LayoutComponent } from './layout.component';


    @NgModule({
        imports: [
            BrowserModule
        ],
        declarations:
        [
            HomeComponent,
            LayoutComponent
        ],
        exports: [
            LayoutComponent,
            HomeComponent
        ],
        providers: [
        ]
    })

    export class LayoutModule {}

    import { Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/Rx';

    @Injectable()
    export class SessionService { // extends ServiceAdapter {

        private _userStatus: boolean = false;
        private _userStatusWithTimeout: boolean = false;
        private _userID: number;
        private _getSessionUserID = 'Session/GetSessionUserID';
        private _getIsSessionUserStatus = 'Session/GetIsSessionUserStatus';

        constructor() {

            this.setSessionVariables();
        }

        setSessionVariables() {

            this.loadUserID()
                .do(data => console.log("loading id: ", data))
                .subscribe(result => this._userID = result);

            this.loadUserStatus()
                .do(data => console.log("loading status: ", data))
                .subscribe(result => this._userStatus = result);

            this.loadUserStatusWithTimeout()
                .do(data => console.log("loading status with timeout: ", data))
                .subscribe(result => this._userStatusWithTimeout = result);
        }

        loadUserID(): Observable<number> {
            return  Observable.of(setTimeout(() => { 1 }, 1000))  // this.getaction<number>(this._getSessionUserID);
        }

        loadUserStatus(): Observable<boolean> {
            return Observable.of(true)   //this.getaction<number>(this._getIsSessionUserStatus);
        }

        loadUserStatusWithTimeout(): Observable<boolean> {
          console.log("setting temp", this._userStatusWithTimeout);
          setTimeout(() => { this._userStatusWithTimeout = true }, 1000)
          console.log("temp is set", this._userStatusWithTimeout); 

            return Observable.of(this._userStatusWithTimeout)   //this.getaction<number>(this._getIsSessionUserStatus);
        }

        getUserID(): number {
            return this._userID;
        }

        getUserStatus(): boolean {
            return this._userStatus;
        }

        getUserStatusWithTimeout(): boolean {
            return this._userStatusWithTimeout;
        }
    }