Angular2で認証ガードを使用するときにhttpコールを行う方法

Question

私は自分のプロジェクトで認証ガードを使用しています。私は実際のデータの代わりに無効な応答/匿名オブジェクトを取得しているHTTPサービスを呼び出している間。以下

私module.tsが

// providers used to create fake backend 
    import { NgModule }  from '@angular/core'; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { FormsModule } from '@angular/forms'; 
    import { HttpModule,JsonpModule } from '@angular/http'; 
    import { Jsonp } from '@angular/http'; 
    // used to create fake backend 
    import { fakeBackendProvider } from './_helpers/index'; 
    import { MockBackend, MockConnection } from '@angular/http/testing'; 
    import { BaseRequestOptions } from '@angular/http'; 

    import { AppComponent } from './app.component'; 
    import { routing }  from './app.routing'; 

    import { AlertComponent } from './_directives/index'; 
    import { AuthGuard } from './_guards/index'; 
    import { AlertService, AuthenticationService, UserService, AdminService }      
    from './_services/index'; 
    import { HomeComponent } from './home/index'; 
    import { AdminDashComponent } from './home/admindashboard.component'; 
    import { LoginComponent } from './login/index'; 
    import { RegisterComponent } from './register/index'; 
    import { ChartsModule } from 'ng2-charts'; 

    @NgModule({ 
     imports: [ 
      BrowserModule, 
      FormsModule, 
      HttpModule, 
      routing , 
      ChartsModule, 
      JsonpModule 
     ], 
     declarations: [ 
      AppComponent, 
      AlertComponent, 
      HomeComponent, 
      LoginComponent, 
      RegisterComponent, 
      AdminDashComponent 
     ], 
     providers: [ 
      AuthGuard, 
      AlertService, 
      AuthenticationService, 
      UserService, 

      fakeBackendProvider, 
      MockBackend, 
      BaseRequestOptions, 
      AdminService 
     ], 
     bootstrap: [AppComponent] 
    }) 

    export class AppModule { } 

を提出され、これは事前に

import { Injectable } from '@angular/core'; 
    import { Http, Headers, Response } from '@angular/http'; 
    import 'rxjs/add/operator/map'; 
    import 'rxjs/add/operator/catch'; 
    import 'rxjs/add/operator/do'; 

    @Injectable() 
    export class AdminService { 

    // Define the routes we are going to interact with 
    private dataUrl = 'app/_services/admin.json'; 

    constructor(private http: Http) { } 

     adminData:any; 

    // Implement a method to get the public deals 
     getData(){ 

     var jwt = localStorage.getItem('currentUser'); 
     var authHeader = new Headers(); 

     if(jwt) { 
      authHeader.append('Authorization', 'Bearer ' + jwt);  
     } 

     this.http.get('app/_services/admin.json', {headers: authHeader}) 
        .map(res => res.text()) 
        .subscribe(
        data => {console.log('before assign ', data); 
        this.adminData = data; 
         console.log('after assign ', this.adminData) 
        }, 
        err => console.log(err), 
        () => console.log('Complete') 
    ); 
     console.log('at the end' , this.adminData); 
     return this.adminData; 
     } 

    } 

おかげで私の角度サービスです！

Answer 1

http.get（）を待ってから、設定する前にadminDataを返します。要求が行わバックエンドにするときあなたが