2017-04-09 73 views
0

我有一個共享服務的角度應用程序,以幫助我在所有組件共享數據設置全局數據從GET請求屬性之前繼續

共享服務

@Injectable() 
export class ShareService { 
    userData: []; 
    selectedMonth: number; 
    selectedYear: number; 
} 

用戶服務

@Injectable() 
export class UserService { 

    baseApiUrl = environment.api_base_url; 
    constructor(private http: Http, private cookie: CookieService) { } 

    getUserData() { 
    return this.http.get(this.baseApiUrl + 'api/get-user-data' + this.cookie.get()) 
     .map((res: Response) => res.json()); 
    } 

AppComponent

export class AppComponent implements OnInit { 

    isAuth: boolean = false; 
    isAdmin: boolean; 

    constructor(private auth: AuthService, 
       private user: UserService, 
       private share: ShareService) { 
    } 

    ngOnInit() { 
     this.setUser();  
    } 


    setUser() { 
     this.user.getUserData().subscribe(
      (data) => { 
       this.share.user = data; 
       console.log(data); 
      } 
     ); 
    } 
} 

userData屬性在可觀察請求完成後設置。 因爲應用程序使用userData我想在執行其他事情之前完成設置此屬性。

完成此操作的最佳方法是什麼?有沒有辦法使同步http調用呢?

+0

爲您的其他服務電話添加代碼 – Aravind

+0

@Aravind我已經更新了我的答案 – marnaels

+0

您想以這種方式解決還是替代方法? – Aravind

回答

3

有四個服務

  1. 全球
  2. UserService
  3. HttpUtil
  4. 認證

全球服務

@Injectable() 
export class Global { 

    constructor(private userService: UserService, private router: Router) { 
     if (!this.isAuthenticatedUser()) { 
      this.router.navigateByUrl('/login'); 
     } 
    } 
    handleError(error: Response) { 
     console.log(error); 
     return Observable.throw(error.json().error || 'Internal Server error'); 
    } 
    isAuthenticatedUser(): boolean { 
     let user = this.userService.getUser(); 
     if (_.isEmpty(user)) { 
      return true; 
     } else { 
      return false; 
     } 

    } 
} 

UserService

@Injectable() 
export class UserService { 
    constructor() { } 
    setUser(user: User) { 
     // store user details and jwt token in local storage to keep user logged in between page refreshes 
     localStorage.setItem('currentUser', JSON.stringify(user)); 
    } 
    getUser(): User { 
     // get the current user from local storage to keep user logged in between page refreshes 
     return <User>JSON.parse(localStorage.getItem('currentUser')); 
    } 
    clearUser() { 
     localStorage.removeItem('currentUser'); 
    } 
} 

HttpUtil:自定義HTTP服務,在應用程序一般處理

export class HttpUtil { 
    private headers: Headers; 
    constructor(
     private globalConstants: GlobalConstants, 
     private http: Http,private userService: UserService, 
     private global: Global) { 
     this.headers = new Headers(
      { 'Content-Type': 'application/json' }, 
     ); 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     if (this.global.isAuthenticatedUser()) { 
      let token = this.userService.getUser().token; 
      this.headers.append('Authorization', 'JWT ' + token); 
      if (!options) { 
       this.headers.forEach((header: any) => { 
        options.headers.append(header.name, header.value); 
       }); 
       options.withCredentials = true; 
      } 
      return this.http.get(url, options); 
     } 
    } 

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
     if (this.global.isAuthenticatedUser()) { 
      let token = this.userService.getUser().token; 
      this.headers.append('Authorization', 'JWT ' + token); 
      if (!options) { 
       this.headers.forEach((header: any) => { 
        options.headers.append(header.name, header.value); 
       }); 
       options.withCredentials = true; 
      } 

的AuthenticationService - 調用httpUtil所以通過了應用程序,你應該使用HttpUtil,而不是Http@angular/http

讓我知道你是否需要更多的解釋

+0

感謝您的答案。我會嘗試。正如我所看到的,它比我試過的方式更好:) – marnaels

相關問題