どのように私は私の認証サーバーに接続し、認証状態を保存するためのAuthServiceを使用してサービス

Question

でAngular2のグローバル変数を格納するために、ここで必要なコードです：

auth.service.ts

@Injectable() 
export class AuthService { 

    state = { 
    isLoggedIn: false, 
    redirectUrl: '' 
    }; 


    private authUrl = 'http://localhost:3000/admin/auth'; 

    constructor(private http:Http) { 

    this.state.isLoggedIn = false; 
    this.state.redirectUrl = ''; 
    } 

    auth(name:string, password:string):Observable<Auth> { 

    let headers = new Headers({'Content-Type': 'application/json'}); 
    let options = new RequestOptions({headers: headers}); 

    return this.http.post(this.authUrl, {name: name, pw: password}, options) 
     .map(this.extractData, this.state) 
     .catch(this.handleError); 
    } 

    extractData(res:Response) { // <-- this.state become undefined 

    let body = res.json(); 

    this.state.isLoggedIn = (body.res == 0); // <-- Cannot read property 'isLoggedIn' of undefined 

    return body || {}; 
    } 
} 

のauth-guard.service.ts

@Injectable() 
export class AuthGuard implements CanActivate { 

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

    canActivate(route:ActivatedRouteSnapshot, stateSnapshot:RouterStateSnapshot):boolean { 

    // this.authService.state.isLoggedIn: false 
    // this.authService.state.redirectUrl: '' 

    let url:string = stateSnapshot.url; 

    return this.checkLogin(url); 
    } 

    checkLogin(url:string):boolean { 

    // this.authService.state.isLoggedIn: false 

    if (this.authService.state.isLoggedIn) { 
     return true; 
    } 

    // Store the attempted URL for redirecting 
    this.authService.state.redirectUrl = url; 

    // this.authService.state.redirectUrl: '/admin' 

    // Navigate to the login page with extras 
    this.router.navigate(['/admin/auth']); 
    return false; 
    } 
} 

私は名前を使ってログインしようとすると、パスワード、auth.service.tsさんのコメント：Cannot read property 'isLoggedIn' of undefined。

なぜstateが定義されなくなったのか分かりません。あなたの問題は、このコード行から茎のような

Answer 1

に見えます

return this.http.post(this.authUrl, {name: name, pw: password}, options) 
    .map(this.extractData, this.state) //<-- right here 
    .catch(this.handleError); 

マップの状態のRXJSドキュメント：

マップ（プロジェクト：関数（値：T、インデックス：番号）： R、thisArg：any）：Observable Observableソースによって発行された各値に特定のプロジェクト関数を適用し、その結果の値をObservableとして出力します。

mapの2番目の引数の定義を具体的に見てください。それは "this"ポインタを指定します。

これはthis.stateに設定されており、stateにはstateというプロパティがないため、定義されていません。

あなたはこのポインタ

return this.http.post(this.authUrl, {name: name, pw: password}, options) 
    .map((res) => this.extractData(res)) <-- lambda instead 
    .catch(this.handleError); 

またはあなただけ明示的に2番目の引数としてこのポインタ正しいを渡すことができ

return this.http.post(this.authUrl, {name: name, pw: password}, options) 
    .map(this.extractData, this) 
    .catch(this.handleError); 

Answer 2

を試しを試してみて、再バインドしませんラムダを渡すことができます

this.extractData.bind(this); 

*は、=>関数では機能しません。

Answer 3

extractDataが呼び出されると、このコンテキストが変更されました。これを避けるにはfat arrowを使用してください。

 return this.http.post(this.authUrl, {name: name, pw: password}, options) 
     .map((res) => this.extractData(res)) 
     .catch(this.handleError);