Angular2プロパティは、私がログインプロセスの後に私の接続ユーザー・モデルを取得しようとしていますタイプ

Question

上に存在しない、

まずCanActivateガードは、ユーザーJSONオブジェクトにローカルストレージを確認した後、ユーザーは、「/ログイン」URLにリダイレクトされますそれがnullであることがわかりました

次に、ユーザは接続プロセスでルートURL「/」、 にログインしてリダイレクトしています。ユーザモデルでサーバから返されたユーザオブジェクトを保存するAuthServiceを使用しています

このエラーが発生しました：

のsrc /アプリ/ _guards/auth.guard.ts（12,48）：プロパティ 'トークンは、' タイプ」ユーザーズに存在しない）

私のユーザモデルは次のようになります。

export class User { 
constructor(
    public email:string, 
    public passowrd:string, 
    public firstname:string, 
    public lastname:string, 
    public token:string 
){} 
} 

と私のAuthService次のようになります。

import { Injectable } from '@angular/core'; 
import { User } from "../_models/user"; 
import { Observable } from 'rxjs/Rx'; 
import { Http, Headers, Response } from '@angular/http'; 
import { Router } from "@angular/router"; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class AuthenticationService { 
    private user: User; 

    constructor(private http: Http,private router:Router) { 
    // set token if saved in local storage 
    var currentUser = JSON.parse(localStorage.getItem('currentUser')); 
    this.user = currentUser; 
    } 

    getUser(){ 
    return this.user; 
    } 

    login(email:string,password:string): Observable<boolean> { 
     const body = JSON.stringify({ email: email, password: password }); 
     const headers = new Headers({ 
     'Content-Type' : 'application/json' 
     }); 

     return this.http.get("https://test.firebaseio.com/users.json",{headers:headers}) 
      .map(
      (response: Response) => { 

       // login successful if there's a token in the response 
       let token = response.json() && response.json().token; 
       if(token){ 
        // set user object 
        this.user = response.json(); 

        // store username and jwt token in local storage to keep user logged in between page refreshes 
        localStorage.setItem('currentUser', JSON.stringify(this.user)); 

      // return true to indicate successful login 
        return true; 
       } else { 
        // return false to indicate failed login 
        return false; 
       } 
       //return response.json(); 
      } 
     ); 
    } 

    logout(): void { 
    // clear token remove user from local storage to log user out 
    this.user = null; 
    localStorage.removeItem('currentUser'); 
    this.router.navigate(['/']); 
    } 
} 

と、これは私のガードです：

import { Injectable } from '@angular/core'; 
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { AuthenticationService } from '../_services/index'; 

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private router: Router,private authService:AuthenticationService) { } 

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot): boolean { 
     if (this.authService.getUser().token) { 
      // logged in so return true 
      return true; 
     } 

     this.router.navigate(['/login']); 
     return false; 
    } 
} 

Answer 1

あなたのログイン方法は静的ではありません。つまり、少なくともAuthenticationServiceのインスタンスを1つ作成した後にのみログインを使用できます。

currentUserをコンストラクタで何も設定しないでください。ログインした後は更新しません。それを修正するために

、追加：

this.user = JSON.parse(localStorage.getItem('currentUser')); localStorage.setItem('currentUser', JSON.stringify(this.user));後のライン上の39

これはおそらく、私はそれを好きではないにもかかわらず、それを修正します。

私は最近、非常によく似たコードを作り、この正確な問題のために私の解決策のようなパブリックメソッドを作成することでした。

public getAuthKey() { 
    return localStorage.getItem('currentUser'); 
    } 

あなたはいつもあなたがもしそこに右の値を取得していることを確認します。この方法1であります。

public getUser(){ 
 
    return this.user; 
 
    }

に、ユーザーサービスモジュールの変更

getUser(){ 
 
    return this.user; 
 
    }

`で

Answer 2

それがどの標準アクセス